Clip Path Generator

Builds a CSS clip-path by dragging handles over a preview, which can be a plain color block or an image you drop in so you can see exactly what gets cut away. It covers all four basic shapes: polygon with as many points as you want, circle, ellipse, and inset with rounded corners. Every coordinate is a percentage of the element's own box, so the shape holds at any size, and the same shape can be exported as an SVG path for the places clip-path cannot reach.

Pick a preset, then drag the handles. Click an edge to add a point, press Delete with a handle focused to remove it, and use the arrow keys to nudge a point one percent at a time. Drop an image onto the preview to check the shape against real content. Copy the CSS declaration, or switch the output to the SVG path if you need the shape as vector geometry.

The clip-path builders people use most either paywall the shape library or lose your work when you reload. This one keeps the whole shape in the URL fragment, so a link reproduces exactly what you drew, reads an existing value back so you can edit what is already in your stylesheet, and exports an SVG path with the circle radius resolved correctly against the box diagonal. Your image never leaves the page: your files and inputs never leave your device.

Why is my circle clip-path smaller than I expected?

A percentage radius in circle() does not resolve against the width. It resolves against the box diagonal divided by the square root of two, which only equals the width when the box is square. On a 200 by 100 box a 50 percent radius comes out at about 79, not 100. The SVG export here does the same arithmetic, so the exported path matches what the browser draws.

Can a clip-path have curved edges?

polygon() is straight lines only. For curves you have three options: circle() and ellipse() for the simple cases, inset() with a round clause for rounded rectangles, or path() and the newer shape() function for anything else. Support for shape() is still thin, so for a curved cutout today the usual answer is an SVG path, which is why this tool exports one.

Does clip-path affect layout or clicks?

It changes what is painted and what is hit tested, but not layout. The element still takes up its full box, so the space outside the shape stays reserved and neighbors do not move in. Clicks land only inside the visible shape, which is usually what you want but does mean a link clipped down to a small triangle has a small target. Content is clipped, not reflowed, so text can still be cut mid word.