CSS Clip Path Generator

Generate CSS clip-path shapes visually. Choose a preset or fine-tune polygon points and circle/ellipse parameters. Copy ready-to-use CSS.

Preview
Fill color
Shape Preview with Point Markers
P1P2P3
Polygon Points3 pts
#X %Y %
P1
X
Y
P2
X
Y
P3
X
Y
CSS Output
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
With prefix
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Presets
Usage
Apply to any element. Add overflow: hidden on the parent if content bleeds. Use transition: clip-path for smooth animations.