CSS Clip-Path Generator

CSS clip-path accepts a polygon() function made of any number of x/y coordinate pairs, which means it can carve a box into shapes far beyond the simple rectangles and circles most people reach for. The catch is that typing those coordinates by hand is tedious and nearly impossible to get right for anything beyond a basic triangle — this generator turns that coordinate list into a set of draggable points on a live preview, so the shape you see is always the shape the CSS produces.

Every point on the preview is stored as a percentage of the box's width and height, which is exactly how clip-path: polygon() itself works under the hood: a shape built this way keeps its proportions correct no matter what size the element ends up at in a real page, from a small icon mask to a full-width hero banner. Drag any point to reshape the outline, click close to an edge to add a new point exactly where you clicked, or double-click an existing point to delete it — the editor always keeps at least three points, since a polygon can't exist with fewer.

The six bundled presets are picked to prove clip-path can do more than convex shapes: the star and the arrow both rely on reflex angles that point inward, the speech bubble carves a triangular tail out of an otherwise plain rectangle, and the ticket stub dents two notches into opposite edges the way a real perforated ticket looks. Load any preset and keep dragging from there — nothing about the editor locks you into the starting shape.

Upload your own image to preview the clip-path against real content instead of a plain box, or skip the upload entirely and the preview falls back to a striped pattern so the cut shape stays clearly visible either way. Like every tool on this site, the whole thing runs locally in the browser: no image ever leaves your device, and the generator keeps working offline once the page has loaded.