CSS Clip-Path Generator
Preset and draggable polygon, circle, ellipse and inset shapes, copied as CSS.
About this tool
Pick a preset — triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, star, arrow, chevron, speech bubble, cross, slanted edge, circle, ellipse or rounded inset — then drag the handles on the preview, add or double-click to remove points, change the preview fill, and copy the clip-path declaration.
Cutting shapes with CSS
The clip-path property hides everything outside a shape, so an image, card or hero section can be a hexagon, have a slanted bottom edge or sit inside a speech bubble without editing any images. polygon() takes a list of points as percentages of the element's width and height, which is why shapes scale with the element; circle(), ellipse() and inset() cover rounded shapes, and inset(10% round 12px) makes a rounded rectangle cut-out. A few behaviours to know: everything outside the path is not only invisible but no longer clickable; box-shadow is clipped too, so for a shadow put filter: drop-shadow() on a wrapper element; and clip-path transitions animate smoothly only between polygons with the same number of points — which is why the presets use fixed point counts. It is supported in every current browser. The blob generator and the SVG wave generator make organic shapes, the box-shadow generator adds depth, the CSS gradient tool fills the shape, and the circle crop tool cuts real image files.
Frequently asked questions
How do I make a hexagon with CSS?
Use clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); — the Hexagon preset gives exactly this.
Why did my box-shadow disappear?
clip-path clips shadows too. Wrap the element and apply filter: drop-shadow(...) to the wrapper instead.
Can I animate clip-path?
Yes, with transitions or keyframes, as long as the start and end polygons have the same number of points.
Is anything uploaded?
No. The shape and CSS are generated in your browser.