CSS Clip Path Generator
Create and customize clip-path shapes visually
Shape Type
Circle
Ellipse
Polygon
Inset
Polygon Presets
Triangle
Pentagon
Hexagon
Star
Custom
+ Add Point
- Remove Last
Circle Settings
Radius
40%
Center X
50%
Center Y
50%
Ellipse Settings
Radius X
40%
Radius Y
30%
Center X
50%
Center Y
50%
Inset Settings
Top
Right
Bottom
Left
Border Radius
0%
Generated CSS
clip-path: circle(40% at 50% 50%);
Copy