CSS Clip-Path Generator
Build clip-path shapes visually. Choose presets, drag polygon points, edit circle/ellipse/inset parameters, and copy CSS.
Shape Presets
Editor
Polygon Points Controls
1
%
%
2
%
%
3
%
%
CSS Code
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Related tools
CSS Gradient GeneratorCSS
Build beautiful CSS gradients visually with a live preview.
Box Shadow GeneratorCSS
Create CSS box-shadow values visually with multiple shadows and live preview.
Border Radius GeneratorCSS
Visual CSS border-radius editor with per-corner control.
Flexbox PlaygroundCSS
Interactive CSS flexbox layout builder with live preview.
CSS Grid GeneratorCSS
Visual CSS Grid layout generator with cell spanning.
CSS Animation GeneratorCSS
Build CSS @keyframes animations visually with live preview.