CSS Clip-path Generator

The CSS Clip-path Generator writes the clip-path declaration you need to crop an element into a non-rectangular shape, without hand-counting percentages.

Pick from ready-made polygons — triangle, rhombus, pentagon, hexagon, star and chevron — or a circle and ellipse, and the tool emits a clean polygon() or circle()/ellipse() value with all the coordinates expressed as percentages so the shape scales with its container.

A live preview renders the clipped element instantly, so you can see exactly how the mask will sit before committing the code to your stylesheet.

For circular shapes a radius slider lets you tune how much of the box is kept, and the ellipse derives a proportional vertical radius for a natural oval.

The output is paired with a -webkit-clip-path line so older WebKit builds behave, and the modern clip-path line drives every current browser.

Clip-path is a lightweight, GPU-friendly way to create badges, arrows, diagonal section dividers and decorative image crops without extra SVG or background images.

Because the coordinates are percentage-based, the same value works at any size.

Everything is generated locally in your browser with no uploads or tracking, so it stays private and works offline once loaded.

Copy the declaration and drop it straight into your CSS.