CSS Clip-Path Generator

Developer

Generate CSS clip-path polygon values with visual presets. See a live preview and copy the CSS.

ttb run css-clip-path-generator

Points (x% y%, x% y%, ...)

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Share this tool:

How to Use CSS Clip-Path Generator

Select a shape preset and see a live preview. Edit polygon points manually then copy the CSS clip-path value.

Click a shape preset to load it.

Modify polygon values in the text area.

Click copy to grab the clip-path CSS.

What is clip-path?+

CSS property that masks an element to a shape — anything outside the polygon is hidden.