CSS Clip-Path Generator

Make CSS clip-path shapes visually: click to add polygon points, drag them into place, snap to a grid and fine-tune coordinates, or switch to circle, ellipse and inset. Start from presets like a star, arrow or message bubble and copy clean clip-path CSS.

This tool runs entirely in your browser.

Loading tool…

How to use the CSS Clip-Path Generator

1Choose a shape: polygon, circle, ellipse or inset.
2For polygons, pick a preset or click empty space on the preview to add a point on the nearest edge; drag points to move them.
3Turn on grid snapping for tidy values, or type exact x and y percentages in the point list. Select a point and press Delete to remove it.
4For circle, ellipse and inset, use the sliders (or drag the centre handle), then copy the CSS.

What is the CSS Clip-Path Generator?

clip-path hides every part of an element outside a shape, without changing its layout box. polygon() takes a list of x y points — percentages of the element’s width and height — joined in order and closed automatically. circle() and ellipse() take radii and a centre after the at keyword; inset() cuts in from each edge like margins and can round the corners.

Because the coordinates are percentages, the same clip-path works at any element size. Shapes with the same number of points can be animated smoothly with a CSS transition on clip-path, which is how many hover reveals are built.

Frequently asked questions

Does clip-path work in all browsers?

Basic shapes — polygon, circle, ellipse and inset — work unprefixed in all current browsers. Very old Safari versions needed -webkit-clip-path.

Can I animate a clip-path?

Yes, between two shapes of the same type; polygons must have the same number of points. Add duplicate points to the simpler shape if needed.

Why is my box-shadow gone after clipping?

clip-path also clips the shadow, because it sits outside the shape. Put the clip-path on an inner element and use filter: drop-shadow() on a wrapper instead.

Does clip-path change what is clickable?

Yes. The clipped-away area no longer receives clicks or hover, so the interactive area matches the visible shape.

Is the CSS Clip-Path Generator free and private?

Yes. The CSS Clip-Path Generator is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.

All developer tools →