CSS clip-path Generator
Drag vertices to craft shapes and copy clip-path CSS for polygon, circle, ellipse and inset.
Drag the points; double-click to add one and right-click a point to remove it (minimum 3 points).
About CSS clip-path Generator
The clip-path property only trims where an element paints; it never frees up layout space, so clipped-away regions still capture clicks and hovers unless you also set pointer-events. This generator lets you drag polygon vertices straight over the preview and copy exact clip-path code for polygon, circle, ellipse and inset. All values are emitted as percentages of the element itself, so the shape stays responsive.
How to use CSS clip-path Generator
- 1
Pick a mode — polygon, circle, ellipse or inset — or load a preset such as star or speech bubble.
- 2
Drag the handles over the preview until the shape looks right.
- 3
In polygon mode, double-click to add a vertex and right-click a handle to remove it.
- 4
Optionally upload your own image so you can see the clip against real content.
- 5
Copy the clip-path code and paste it into your element's CSS.
Frequently asked questions
What is the difference between clip-path and overflow: hidden?
overflow can only cut content to a rectangle, while clip-path accepts any geometric path — polygon, circle or ellipse — and makes everything outside fully transparent; the trade-off is that clip-path does not clip scrolling the way overflow does.
Why does my box-shadow disappear on a clipped element?
clip-path removes the shadow along with the element. To keep a shadow that follows the clipped edge, use filter: drop-shadow() on the element or its parent instead of box-shadow.
Can clip-path be animated?
Yes, but only when the shape function and point count stay identical between states — you can transition between two polygons with the same number of points, but morphing a circle into a polygon or changing the vertex count is not animatable.
What are the percentage values relative to?
They resolve against the element's own border-box, not the page or viewport. For circle() the percentage radius is tied to a reference diameter derived from the element's size, which is why this preview is square so the circle renders accurately.