CSS Clip Path Generator
Create clip-path shapes visually. Drag points, use presets, copy CSS. 100% client-side.
Shape Mode
Polygon
Circle
Ellipse
Inset
Presets
Triangle
Pentagon
Hexagon
Star
Arrow Right
Arrow Left
Chevron
Cross
Diamond
Parallelogram
Trapezoid
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 (%)
10
%
Right (%)
10
%
Bottom (%)
10
%
Left (%)
10
%
Border Radius (px)
0
px
Editor & Preview
+ Add Point
- Remove Last
Reset
CSS Output
Copy