CSS clip-path generator
Build polygon, circle, ellipse and inset clip-paths with a live, draggable preview.
Runs 100% in your browserDrag the white dots to reshape. For polygons, double-click an edge to add a point and a point to remove it.
CSS
How to use the clip-path generator
- Pick a shape. Polygon, circle, ellipse or inset.
- Drag the points. Click and drag the markers in the preview to reshape.
- Copy the CSS. Click Copy to grab the clip-path rule.
About clip-path
clip-path hides everything outside a geometric shape — the masked area is removed
from the painted output and from hit testing, so links inside the clipped region stop being
clickable. Polygons take a list of percentage points around the box; circle and ellipse take a
radius and center; inset() rounds a rectangle from each edge. For animations, keep
point counts the same — interpolating between two polygons of different lengths jumps rather
than tweens.
Frequently asked questions
- A CSS property that crops an element to a shape — polygon, circle, ellipse or inset rectangle. The cropped-out area is removed from layout for hit testing too.
- Polygon (drag any number of points), circle (radius + center), ellipse (rx/ry + center) and inset (top/right/bottom/left rectangle).
- Yes — interpolating between two clip-paths of the same shape and same number of points works in all modern browsers. Mixing shapes does not animate smoothly.
- clip-path is a hard binary cut along a shape; mask uses an image/alpha to blend the element with the background. Use clip-path for geometric crops, mask for textures or gradient fades.