About this tool
Pick a shape and instantly clip a preview box with the matching clip-path rule, then copy ready-to-use CSS. The preview updates live, entirely in your browser.
Frequently asked questions
How do polygon clip-paths work?
Each point is an x y percentage pair relative to the box; the browser connects them in order and shows only the area inside the outline.
Do all browsers support clip-path?
Polygon, circle, ellipse and inset shapes are supported in every modern browser, so the generated CSS works without prefixes.