CSS Clip-Path Maker
Draw custom clip-path polygons with an interactive visual editor. Start from presets or click to add your own points.
Draw custom clip-path polygons with an interactive visual editor. Start from presets or click to add your own points.
Draw custom clip-path polygons with an interactive editor. Click to add points, drag to reposition, double-click to remove.
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);Fine-tune all four corners independently or use the 8-value elliptical syntax. See the shape update live.
Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.
Layer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.
Runs in your browser.
Every color, gradient and CSS output is generated on this page. Nothing is uploaded, logged or shared.