Clip Path Generator

CSS Clip Path Generator

Create and customize CSS clip-path shapes with a visual editor. Drag the points to modify shapes and generate CSS for polygon, circle, and other clip-path shapes.

CSS Output

Edit or paste clip-path value:

/* CSS Clip Path */
clip-path: ;

/* Element with clip-path applied */
.clipped-element {
  background-color: #ef4444;
  clip-path: ;
}

Shape Controls

Shape Presets

Clipped Area Color

Enable Grid Snap

Show Clipped Area

Show Advanced Guides

Background Image

Instructions:

Drag the points to modify the shape
Click and drag on the edge of the shape to add a new point
Click and drag inside the shape to move the entire shape
Hold Shift while dragging to temporarily disable grid snapping
Hover over a point to reveal the delete button
Paste a clip-path value to import an existing shape