CSS Clip-Path Generator

Create CSS clip-path shapes visually — triangles, hexagons, stars, arrows, speech bubbles and more — drag points to customize and copy the polygon() CSS.

How to use

1Choose a starting shape.
2Drag the handles to reshape; double-click to add a point, right-click to remove one.
3Copy the clip-path CSS.

Frequently asked questions

Is clip-path supported everywhere?

Yes — all modern browsers support clip-path with polygon(), circle(), ellipse() and inset().

Does clipping affect layout?

No — the element keeps its full box; only the visible and clickable area changes.

Can I animate clip-path?

Yes, between polygons with the same number of points.