CSS clip-path Generator
Drag out a polygon, circle or inset shape and copy the CSS that makes it.
Cutting An Element Without Moving Anything Around It
clip-path cuts an element down to a shape without changing the box it occupies. The layout around it does not move, the space is still reserved, and the parts you clipped away stop receiving clicks — which is why a diagonal section header made this way does not swallow the taps meant for whatever is underneath it.
Writing the coordinates by hand is miserable and reading them back is worse. Dragging them is the obvious answer, so that is what this does: move the handles, watch the shape, copy the CSS. Points are in percentages, so the shape scales with whatever you put it on.
Key features
- Four shape types — polygon, circle, ellipse and inset with rounded corners.
- Twelve presets — triangle, hexagon, star, arrow, chevron, speech bubble and the diagonal section shapes.
- Drag, or use the keyboard — every handle is focusable and moves with the arrow keys, ten times faster with Shift.
- Add and remove points — a new point lands in the middle of the longest edge; double-click a handle to remove it.
- See what is cut away — a ghost of the clipped region, which a preview of the final shape alone can never show you.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: CSS clip-path Generator
- Pick a shape type or a preset
Polygon covers most cases; circle and inset are simpler when they fit. - Drag the handles
Or focus one and nudge it with the arrow keys for precision. - Add points where you need them
The new point goes in the middle of the longest edge, which is usually where you want it. - Copy the CSS
One declaration, ready to paste onto your element.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
Why did my box shadow disappear?
Because clip-path clips everything the element paints, and a shadow is painted outside the element's box — so it is cut off entirely. The usual fix is a wrapper: put the shadow on the parent and the clip on the child, or use a drop-shadow filter on the parent, which follows the clipped silhouette.
Does clip-path change the layout?
No. The element keeps its full size and everything around it stays where it was; only the painted result is cut down. That is the difference from resizing it, and it is why a clipped element can still push content below it further down the page.
Can I animate it?
Yes, between polygons with the same number of points — the browser interpolates point by point, so a count mismatch means no transition at all. The usual trick is to pad the simpler shape with duplicate points so both have the same number. Circles and insets animate freely.
Should I use percentages or pixels?
Percentages, in almost every case. They make the shape scale with the element, so the same declaration works on a phone and on a desktop. Pixels are right only when the shape has to stay a fixed size regardless of its container, which is rare.
Is browser support good enough?
Yes, for the basic shapes. Every browser in current use supports polygon, circle, ellipse and inset. The newer additions — clipping to a shape defined elsewhere, and the path() function — are less consistent, so stick to the four here for anything that has to work everywhere.