CSS Clip Path Generator

clip-path cuts an element down to a shape without touching its layout: the geometry stays exactly what it was, only the painting is clipped, and anything outside the shape stops receiving clicks too. The four basic shapes cover almost everything people reach for — a polygon for anything with straight edges, a circle or ellipse for round crops, and inset for a rectangle pulled in from the edges with optional rounded corners. Every number here is a percentage of the reference box, measured from its top-left corner with the vertical axis running downwards, so the shape resizes with the element instead of breaking at the next breakpoint.

How it is calculated

clip-path: polygon(x y, x y, …) | circle(r at cx cy) | ellipse(rx ry at cx cy) | inset(t r b l)

The clip-path property itself is defined by CSS Masking, which hands the shape functions over to CSS Shapes. Shapes fixes the coordinate system: the origin sits on the top-left corner of the reference box, x runs right and y runs down, and percentages resolve against the used dimensions of that box. Without a reference box of its own, clip-path uses the border box.

Source: W3C CSS Masking Module Level 1 § 5.1 — clip-path takes <clip-source> | [ <basic-shape> || <geometry-box> ] | none, and a basic shape uses the reference box to size and position itself, defaulting to the border box

Questions people ask

Why is my clipped element still taking up the same space?

Because clipping is a painting operation. The specification is explicit that a clipping path does not affect the element's inherent geometry — the box keeps the size it would have had unclipped, so the layout around it does not move. If you want the space back, change the size as well.

Does circle(50%) mean half the width?

No, and this catches everyone. A single radius has no axis to belong to, so it resolves against the direction-agnostic size of the reference box, which CSS Shapes defines as the length of the diagonal divided by the square root of two. On a square that equals the side, but on a wide box it is larger than half the height and smaller than half the width. Use ellipse() when you want each axis controlled separately.

What happens when my inset values add up to more than the box?

Nothing invalid. A pair of insets in either dimension that add up to more than the used dimension is proportionally reduced to sum to 100%, by the same overlapping-curves rule border-radius uses. The specification's own example is inset(75% 0 50% 0), which behaves identically to inset(60% 0 40% 0).

Why does this tool only offer percentages?

The grammar allows lengths too, and mixing them is legal. Percentages are the choice that survives a responsive layout: the same shape holds at every width, which is what a clipped hero or a diagonal section divider needs. Swap in px by hand if you are clipping something with a fixed size.

Can I clip to a shape with curved edges?

Not with polygon(), which only joins its vertices with straight lines. CSS Shapes adds path() for SVG path data and shape() for a command list, and clip-path can also point at an SVG clipPath element. This tool stays on the four basic shapes because those are the ones that stay readable once pasted.

Related tools