CSS Clip-Path Generator
Drag polygon points, edit precise percentage coordinates, compare aspect ratios and copy native clip-path CSS locally.
02 / Live clipping
Move points. See the shape.
Drag numbered points; Tab then arrow keys moves 1%, Shift + arrows moves 10%. Esc cancels a drag. Select overlapping points from the point list.
Aspect ratio changes preview dimensions, not coordinates or breakpoints. Numbers, grid and surface colors are not copied.
03 / Precision
Connect points in order
3–12 points; X/Y from 0–100%, precision 0.1%. These are editor limits, not CSS limits. Edges follow list order and close to the first point; native nonzero filling handles concave and self-intersecting shapes.
04 / CSS
Bring it to your UI
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);Clipping changes paint, not layout space. Check content, hit areas and focus outlines in your real component. Settings stay on this page without upload, storage or URL parameters.
How to use this tool
Choose a shape, drag a numbered point or enter X/Y coordinates, then insert, remove or reorder points. Tab and arrow keys offer keyboard movement. Test aspect ratios and copy the matching CSS.
When not to use it
This editor supports percentage polygon() values, not curves, image redaction or arbitrary CSS imports. Clipping does not change layout space and can clip content and focus outlines. Check your real component before publishing.
Read the guide →