CSS clip-path generator
Cut an element into a polygon, circle, ellipse or rounded inset. Drag the points, move a focused point with the arrow keys, or type exact values, then copy the CSS.
Free · Runs in your browser · Updated 26 September 2026
CSS clip-path generator
Shape
Drag a point in the preview, focus it and use the arrow keys (Shift for bigger steps), or type exact values below.
- Point 1
- Point 2
- Point 3
- Point 4
- Point 5
- Point 6
Preview and CSS
CSS
clip-path: polygon(75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%, 25% 6.7%);clip-path cuts what is drawn and where the element responds to the mouse. Focus outlines and shadows on the element are cut too, so keep interactive content inside the shape.
Shape: polygon(75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%, 25% 6.7%)
The shapes
Four functions cover almost everything.
| Function | Example | Meaning |
|---|---|---|
polygon() | polygon(50% 0%, 100% 100%, 0% 100%) | A list of points, joined in order and closed. Any number of points. |
circle() | circle(50% at 50% 50%) | A radius, then the centre after “at”. |
ellipse() | ellipse(50% 35% at 50% 50%) | A horizontal and a vertical radius, then the centre. |
inset() | inset(8% 8% 8% 8% round 12%) | A rectangle cut in from each side, with optional rounded corners. |
The hexagon, pentagon, octagon and star presets are calculated from points on a circle inscribed in the box, not typed in, so their proportions are exact. Start from a preset, then drag the points to make it your own.
Worth knowing
It clips more than the picture.
- clip-path clips everything the element draws, including its own box-shadow and outline. To put a shadow around a clipped shape, wrap the element and apply filter: drop-shadow() to the wrapper.
- Areas outside the shape stop responding to the mouse, which is usually what you want, but it also means a clipped button has a smaller click target.
- Keep interactive content well inside the shape and check that the keyboard focus ring is still visible.
- The clipped-away part is still in the page: screen readers and search engines still read it. clip-path is for looks, not for hiding content.
FAQ
Questions people ask first.
- How do I make a triangle with CSS?
- Use a polygon with three points on a box, for example clip-path: polygon(50% 0%, 100% 100%, 0% 100%). The first point is the top centre and the other two are the bottom corners. Pick Triangle in the generator and drag a point to change it.
- What are the coordinates measured from?
- The top-left corner of the element’s border box, as percentages: 0% 0% is the top left and 100% 100% is the bottom right. Percentages keep the shape in proportion when the element is resized.
- Can clip-path be animated?
- Yes, and polygons animate smoothly between shapes that have the same number of points. If you plan to animate, give both shapes the same point count, even if some points sit on top of each other.
- Which browsers support it?
- MDN lists clip-path with basic shapes as widely available in browsers since January 2020.
- What is the difference between clip-path and border-radius?
- border-radius only rounds the corners of the box. clip-path can cut any shape, and it clips everything the element draws, including its own shadow and outline.
From the team behind the tools
Building a product?
Daniotech builds web, mobile and real-time software for startups and teams. Tell us what you are making and who it is for.