CSS clip-path Editor

clip-path doesn't paint anything — it only hides whatever falls outside the shape, revealing the page background underneath (or whatever's behind the element). If you want a colored shape, apply clip-path to an element that already has that background color or image; the shape itself doesn't add color.

Yes, for polygon(), circle(), and ellipse() — a coordinate below 0% or above 100% is valid CSS and pushes part of the shape outside the element's own box, which is sometimes exactly what you want (e.g. a shape that bleeds off one edge). inset() edges are clamped to non-negative values here since a negative inset doesn't have a sensible meaning.

No — clip-path only changes what's painted, not the element's box size or position in the layout, and in most browsers it also clips pointer events to the visible shape (so clicks outside the shape but inside the original box pass through). This is different from overflow: hidden, which doesn't reshape hit-testing at all.

Yes, but only between two polygon() values with the exact same number of points (or two circle()/ellipse()/inset() values) — the browser interpolates each coordinate individually, so a mismatched point count can't be animated smoothly. If you're building a hover effect, make sure both states use the same shape function and point count.

Yes for polygon(), circle(), ellipse(), and inset() — support has been solid across Chrome, Firefox, and Safari for years. The newer shape(), path(), and CSS Shapes Level 2 features aren't covered by this editor, which sticks to the four widely-supported basic shapes.