CSS Clip Path Maker
Create CSS clip-path shapes by dragging control points on a visual canvas. Supports polygon, circle, ellipse, and inset shapes. Live preview on sample images with generated CSS code.
Visual Editor— click to add points, drag to move
Preset Shapes
Points (3)
1
X%
Y%
2
X%
Y%
3
X%
Y%
Generated CSS
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);clip-path: polygon(50% 0%, 100% 100%, 0% 100%);Tips
- Click anywhere on the canvas to add a new point.
- Drag the white circles to reposition points.
- Use the point list inputs for precise coordinate control.
- Enable the
-webkit-prefix for older Safari support.