CSS Clip Path Generator
Clip an element to a circle, ellipse, inset or one of twelve polygon presets, in percentages so the shape holds at any size.
Enable JavaScript to change the shape; the CSS below is for the defaults.
inset crops from the edges, circle and ellipse cut a curve, polygon takes points.
The shapes that are tedious to write by hand. Edit the points afterwards for anything else.
50% of the element's smaller side, so a square becomes a circle.
Where a circle or ellipse is centred.
The round keyword, which is how an inset gets rounded corners.
A clip path cuts whatever is inside, including text, which is worth seeing.
A clip path cuts everything inside the element, text included.
polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
.your-element {
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}Clip an element to a shape and watch it happen, in percentages so the shape holds at every size.
How to use
- Pick the shape.
insetcrops from the edges,circleandellipsecut a curve,polygontakes a list of points. - For a polygon, start from a preset. The twelve here are the ones that are tedious to write by hand; edit the points in the output for anything else.
- Watch the preview. A clip path cuts everything inside the element, text included, which is the thing people are surprised by.
- Copy the CSS. The prefixed property comes first for older Safari, then the standard one.
Example
.your-element {
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}Every point is a percentage of the element’s own box, so the hexagon stays a hexagon whether the element is 200 pixels wide or 2,000.
Pitfalls
- Pixels are the trap.
polygon(0 0, 300px 0, …)looks right at one size and wrong at every other; percentages are relative to the element and survive. - A clip path clips everything: text, children, focus rings, box shadows. A shadow outside the shape simply disappears, which is why a clipped card usually needs the shadow on a wrapper.
- Clipped edges are aliased, not antialiased, in some browsers at some angles. A one pixel jaggy on a diagonal is normal; an SVG mask is the smoother option.
- A clipped element still takes its full rectangular space in layout, and still receives pointer events only inside the clip. Hover on a corner that was cut away does nothing.
clip-pathandoverflow: hiddenare not the same thing. Overflow crops to the box; clip-path crops to a shape.- Animating between two polygons only works when both have the same number of points. Two shapes with different counts snap instead of tweening.
- Percentages in
circle()resolve against a diagonal measure, not the width, so a circle in a non-square element is not the size you first expect. - The old
clipproperty is deprecated and has nothing to do with this; do not mix them up.
Compatibility
clip-path with basic shapes is supported in every current browser. Safari needed -webkit-clip-path until 13.1 and still accepts it, which is why the generated CSS writes both. path() and shape() values are newer and not generated here. Percentages behave identically everywhere. The tool runs entirely in your browser.
Frequently asked questions
Why has my box shadow disappeared?
Can I animate a clip path?
Are the edges antialiased?
How do I make a shape with a hole?
clip-path. Use an SVG mask, or mask-image with two gradients.