Back to Arsenal
CSS Clip-Path Generator
DeveloperGenerate CSS clip-path polygon values with visual presets. See a live preview and copy the CSS.
ttb run css-clip-path-generator
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.
1
Pick preset
Click a shape preset to load it.
2
Edit points
Modify polygon values in the text area.
3
Copy CSS
Click copy to grab the clip-path CSS.
Frequently Asked Questions
What is clip-path?+
CSS property that masks an element to a shape — anything outside the polygon is hidden.
More Developer Tools
Free tools, weekly.
Get lightweight updates when new tools land.