Generators
Clip-Path Maker
Pick a shape, drag handles, copy CSS — all in your browser.
polygonLive
Presets
Drag the handles on the preview to reshape the polygon.
CSS
clip-path: polygon(50% 2%, 62.9% 32.2%, 95.7% 35.2%, 70.9% 56.8%, 78.2% 88.8%, 50% 72%, 21.8% 88.8%, 29.1% 56.8%, 4.3% 35.2%, 37.1% 32.2%);
Generators
CSS clip-path maker online free
Shape images with CSS clip-path without hand-writing polygons. Pick a shape, drag handles, and copy the CSS — all generated in your browser for front-end experiments.
How it works
Pick a starting shape.
Drag handles until the path looks right.
Copy the CSS clip-path value.
Why this tool
- Visual handle editing
- Copy-ready CSS
- Runs in your browser
- Great for UI mockups
Frequently asked questions
Do I need to install anything?
No. The maker runs entirely in your browser.
What do I get as output?
A CSS clip-path value you can paste into your stylesheet.
Is it free?
Yes — free online on Aniflare.