CSS clip-path Builder (Circle, Ellipse, Polygon, Inset)

Percentages make the shape responsive: a polygon(50% 0%, 100% 100%, 0% 100%) triangle stays a triangle whether the element is 100px or 1000px wide. You can also use absolute units like px, em, or rem, but for reusable components, % is almost always what you want. This tool only outputs percentages — paste, then change units in your CSS if you really need a fixed size.

Yes. clip-path is purely a paint-time effect — the element's layout box doesn't change, so surrounding content flows around the original rectangle, not the clipped shape. If you need the layout to respect the visible shape, use shape-outside (separate property), mask-image, or an SVG with a path.

Yes, but only between paths with the same number of vertices in the same shape family — you can animate one polygon to another polygon with identical vertex count, or one circle to another circle, but not polygon-to-circle. For polygon morphing make sure both states have the same number of points in roughly the same order. The browser interpolates vertex coordinates linearly.

It's an optional radius applied to the four corners of the inset rectangle — same syntax as border-radius. inset(10% round 5%) is a rounded rectangle clip. Set it to 0 (no round) for sharp corners. The CSS spec lets you specify different radii per corner (round 10% 20% 5% 15%), but this tool keeps it simple with one uniform value.

Safari needs the -webkit-clip-path prefix on versions older than 14.1 (2021). Almost all current browsers support unprefixed clip-path. Emitting both costs nothing and protects users on slightly older devices. You can drop the -webkit- line if you only target evergreen browsers.