CSS clip-path Generator
Create clip-path code by dragging the points right on the preview. It supports polygon, circle, ellipse and inset, and you can start from presets such as a triangle, hexagon, star, arrow or speech bubble. Every coordinate is a percentage, so the shape scales with the element. For rounded corners and shadows, see the CSS Border-Radius Generator and the CSS Box-Shadow Generator.
🔒 Runs in your browser · Your data is never sent to a server
Preview
The dashed frame is the original element. For polygon, drag a point, or focus it and use the arrow keys.
Points
How to use
- Pick polygon, circle, ellipse or inset in "Shape".
- For polygon, choose a form from "Preset", then drag the points on the preview to adjust it ("Add point" adds more).
- For circle, ellipse and inset, enter the size and position as numbers.
- Press "Copy" to copy the clip-path CSS.
Notes
- Coordinates are percentages of the element, with the top-left at 0% and the bottom-right at 100%. The shape stretches with the element’s width and height.
- The clipped-away area is not only hidden; it also stops receiving clicks and other pointer events.
- Box shadows and borders are clipped too. To keep a shadow, apply filter: drop-shadow() to a wrapping parent element.
- A polygon needs 3 to 24 points. Polygons with different point counts cannot be animated smoothly into each other.
Glossary
clip-path
The CSS property that crops an element to a shape. Anything outside the shape is not painted and no longer receives pointer events.
polygon()
A clip-path function that lists vertex coordinates in order to define a polygon. Each vertex is written as "x y" in % or px.
inset()
A function that defines a rectangle by cutting in from the top, right, bottom and left edges. Add round to round its corners.
FAQ
Can I add a shadow or border to a clipped element?
clip-path crops shadows and borders too. To keep a shadow, wrap the element in a parent and apply filter: drop-shadow() to that parent.
How do I add more points?
Choose polygon and press "Add point"; a new point is placed halfway between the last and the first point. You can have up to 24 points and remove points down to 3.
Why does the shape change with the element size?
All coordinates here are percentages of the element’s width and height, so a taller or wider element stretches the shape by the same ratio. To fix sizes in px, edit the values by hand after copying.
Which browsers support clip-path?
All major modern browsers do. If you need to cover older Safari, turn on "Also output -webkit- prefix" to include -webkit-clip-path in the output.
Share this page