About CSS Clip Path Generator
Break out of the box. Use our interactive editor to create custom polygon clip-paths with drag-and-drop point manipulation and presets.
CSS Clip Path Generator
Drag the handles to create custom polygon shapes with clip-path.
Back to Design & UI
CSS Clip-Path Generator
Drag the handles to create custom polygon shapes
1
X: 50%
Y: 0%
2
X: 100%
Y: 100%
3
X: 0%
Y: 100%
1
2
3
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);Something not working right?
Found a bug or have a suggestion to improve the CSS Clip Path Generator? Let us know and we'll fix it!