CSS Clip Path Generator
Note: A clipped element cannot paint outside its shape, so its box-shadow and its focus outline are cut away with everything else. If the element is a link or a button, put the shadow and the focus ring on a wrapper instead.
The generator writes four shape functions. polygon() is the flexible one: a list of x y pairs in percentages, joined in order, closed automatically. circle() and ellipse() take a radius and a centre after the at keyword. inset() is a rectangle described by how far it is pulled in from each edge, with an optional round for corners, which is the cheap way to get a rounded rectangle that a border-radius cannot produce because it is being animated.
Drag any point on the preview to move it, or edit the coordinate list directly if you are matching a design that was specified numerically. Percentages are relative to the element's own border box, so the same clip-path holds its proportions when the element resizes — that is why the output uses them rather than pixels.
One caveat worth knowing before you ship: a clipped element cannot paint outside its shape, and that includes its box-shadow and its focus ring. If the element is interactive, put the shadow on a wrapper.
Frequently Asked Questions
Why does my element still respond to clicks in the clipped-away corners?
It should not — clip-path clips hit-testing along with the paint in every current browser. If clicks are still landing, the target is almost certainly a parent or an overlaying element that is not clipped, not the clipped element itself. Check with the browser's element inspector at that exact point.
Can I animate between two clip-paths?
Only between shapes of the same type, and for polygons only when both have the same number of points listed in the same direction. A four-point polygon will not interpolate to a six-point one; it will jump at the halfway mark. Pad the shorter list with duplicate points to make the counts match.
Does this work on images and videos?
Yes, on any replaced element as well as ordinary boxes. Applying it to a video is the usual way to get a non-rectangular player without an alpha channel in the source file.
What about the old webkit prefix?
Safari has supported unprefixed clip-path on HTML elements since version 13.1, so the prefix is only worth adding if you still support older iOS builds. The output includes it as a commented line you can uncomment rather than shipping it by default.
