Clip Path Generator

Create complex CSS clip-path shapes with visual editor and live preview

Shape Type

Points (4)

X: 50%

Y: 0%

X: 100%

Y: 50%

X: 50%

Y: 100%

X: 0%

Y: 50%

Presets

Live Preview

Clipped Content

Click on the preview to add points (max 12)

CSS Output

Browser Support

✅ Chrome 55+, Firefox 54+, Safari 10.1+

⚠️ Use -webkit-clip-path for older browsers

Usage Examples

CSS Class

.clipped-element {
  
  /* Add webkit prefix for older browsers */
  -webkit-clip-path: ;
}

HTML

<div class="clipped-element">
  <img src="image.jpg" alt="Clipped image" />
</div>