Free CSS Clip-Path Generator Online
The CSS clip-path property lets you cut an element into any shape - triangles, hexagons, arrows, circles, speech bubbles and more - without images or extra markup. This free clip-path generator gives you a visual editor so you can design the shape by dragging points instead of guessing coordinates, then copy production-ready code in one click.
Polygon, Circle, Ellipse and Inset
Work with every basic shape function: polygon() for any custom outline, circle() and ellipse() with adjustable radius and centre, and inset() for rectangles with optional rounded corners. Each has draggable handles and exact numeric controls.
Built for Real Workflows
Snap points to a 1%, 5% or 10% grid, undo and redo up to 100 steps, nudge points with the keyboard, and import an existing clip-path declaration to keep editing it. Switch the output between percentages and pixels, include the -webkit- prefix for older browsers, and copy the result as CSS, SVG clipPath, a Tailwind class or a React style object.
Test With Your Own Image
Preview the shape on a gradient, a solid colour or your own photo - the image never leaves your browser. Download the clipped result as a transparent PNG at 512, 1024 or 2048 pixels wide.
Common Use Cases
Hero sections: angled and diagonal section edges. Image masks: hexagon avatars, circles and custom cut-outs. Buttons and badges: arrows, ribbons and tags. Hover effects: animate between two polygons with the same number of points.
Start Cutting Shapes Now
Choose a preset, drag the points until it looks right, and copy your CSS - free, instant and unlimited.