CSS Clip Path Generator
Pick a shape — triangle, hexagon, star, arrow, chevron and more — and copy the clip-path CSS with one click.
polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)CSS generated is free to use — no attribution required.
How do you use the CSS clip-path generator?
Pick a preset shape or drag the points directly on the preview. Each point is a coordinate pair in the generated polygon(), and the CSS updates as you move them. Add points for more complex outlines — the more points, the more precise the silhouette.
What is the CSS clip-path syntax?
clip-path takes a shape function and hides everything outside it. The basic shapes are inset() for a rectangle with optional rounded corners, circle(), ellipse() and polygon() for arbitrary outlines.
A circular avatar is clip-path: circle(50%), which is more predictable than border-radius: 50% when the element is not square, since the circle is genuinely circular rather than an ellipse.
How does the polygon function work?
polygon() takes a list of comma-separated coordinate pairs, each an x and a y measured from the element’s top-left corner. Percentages resolve against the element’s own width and height, so a shape written in percentages scales with the box.
A triangle is three pairs: polygon(50% 0%, 0% 100%, 100% 100%) — apex, bottom-left, bottom-right. The points are joined in the order written and the shape closes automatically, so listing them out of order produces a self-intersecting result rather than an error.
How do you animate a clip-path?
Two polygon() values only interpolate if they have the same number of points, listed in the same order. A three-point shape will not transition into a four-point shape — the browser falls back to a hard swap.
The workaround is to pad the simpler shape with duplicate points so both sides have equal counts. Two coincident points sit on top of each other and are invisible, but they give the animation something to interpolate towards.
What is the difference between clip-path and mask?
clip-path is a hard geometric cut: a pixel is either inside the path or gone, with only antialiasing at the edge. mask works from an image’s alpha channel, so it can fade gradually and produce soft or textured edges.
Use clip-path for defined shapes with crisp edges, and mask when you want a gradient fade-out or an irregular texture. A mask with a gradient is the standard way to fade an image into the page background.
Does clip-path affect clicks, shadows and overflow?
Yes to all three, and it catches people out. The clipped-away region stops receiving pointer events, so the corners of a clipped button are genuinely not clickable — usually what you want, occasionally a surprise.
More disruptively, box-shadow is clipped along with everything else outside the path, so a shape with a shadow appears to have no shadow at all. Use filter: drop-shadow() on the element or a wrapper instead, since it works from the rendered result and traces the clipped silhouette.
How do you make common shapes with clip-path?
A circular avatar is circle(50%). A chevron or arrow is a six-point polygon. A diagonal section divider is a four-point polygon with two corners pulled off the horizontal, which is how those angled page bands are built without images.
For a shape that must stay proportional, write the points in percentages; for one that must keep a fixed edge thickness regardless of element size, mix in pixel values, since coordinates accept both.
Can you use an SVG path as a clip-path?
Yes, in two ways. clip-path: path("M0 0 L100 0 ...") takes SVG path data directly, which handles curves that polygon() cannot express. You can also reference a clip path defined in SVG markup with clip-path: url(#my-clip).
The trade-off is that path() only accepts absolute units, so it does not scale with the element the way a percentage-based polygon does. For responsive shapes, a polygon in percentages remains the more practical choice.
What is the browser compatibility for CSS clip-path?
The basic shape functions — inset(), circle(), ellipse() and polygon() — are supported across all current browsers unprefixed and are safe in production. path() arrived later but is also broadly available now. Since a failed clip-path simply leaves the element unclipped rather than breaking the layout, it degrades gracefully by default.