Polygon Clip-Path Generator

Generate clip-path polygon shapes — stars, hexagons, arrows — with rotation and color controls.

Preset Shape

Style

Color

Size200px

Rotation0°

Preview — Hexagon

polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)

Generated CSS

.shape {
  width: 200px;
  height: 200px;
  background: #6366f1;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transform: rotate(0deg);
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Polygon Generator?

Generate CSS polygon shapes using clip-path: polygon(). Drag vertices to create any polygon, then copy the clip-path value.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Polygon Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Select a base shape or start custom

Choose from triangle, diamond, pentagon, hexagon, octagon, or star. Or start with a blank canvas for a custom shape.

Drag vertices to reshape

Click and drag any vertex to move it. Double-click an edge to add a new vertex. Click a vertex and press Delete to remove it.

Copy the clip-path value

Click Copy to get the clip-path: polygon() value with all coordinates.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* Regular polygons */
.triangle  { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.diamond   { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.pentagon  { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.hexagon   { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.octagon   { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }

Polygon coordinates are percentages relative to the element bounding box. The shape scales automatically with the element size.

Pro tips

Pro tips for better results

★

Use percentage coordinates for responsive shapes

Percentage values in polygon() are relative to the element dimensions. The shape scales perfectly as the element resizes - no media queries needed.

★

Clip-path does not affect layout space

The element still occupies its original rectangular box. Use negative margins or padding to make adjacent elements visually align with the clipped edges.

★

Animate between polygons with the same vertex count

CSS transition on clip-path works when both states use polygon() with the same number of points. Animating between a 4-point and a 6-point polygon does not work.

FAQ

Frequently asked questions

Yes. clip-path with polygon() is supported in Chrome 55+, Firefox 54+, Safari 9.1+, and Edge 79+. The -webkit- prefix is required for Safari below version 15.4.

No. Everything runs in your browser. Nothing is sent to a server.