CSS Clip-path Builder

Drag handles to create custom clip-path shapes

Shape Editor

1234567

Drag the numbered handles to reshape • 7 points

Live Preview

Fill:
🖼

With image

Solid fill

Shape Presets

CSS Output

clip-path: polygon(0% 30%, 60% 30%, 60% 5%, 100% 50%, 60% 95%, 60% 70%, 0% 70%);
Value only
polygon(0% 30%, 60% 30%, 60% 5%, 100% 50%, 60% 95%, 60% 70%, 0% 70%)
Feedback