All tools · 🎨 Design
✂️ CSS Clip-Path Generator
Drag vertices on a canvas to design custom clip-path shapes — polygons of any vertex count, circles, ellipses, or preset shapes (hexagon, parallelogram, arrow). Live preview on a sample image. Copy the CSS clip-path() value.
Loading tool…
Examples
Hexagon
Output
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)Circle
Output
clip-path: circle(50% at 50% 50%)Arrow
Output
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)Frequently asked questions
Browser support for clip-path?
All modern browsers. Some older Safari needs -webkit-clip-path prefix.
Can I animate clip-path?
Yes — same polygon vertex count animates between shapes. Different vertex counts don't animate; use a same-count "matching" shape.
About this tool
CSS Clip-Path Generator runs entirely in your browser using standard Web APIs. No data is sent to any server. The source for this tool is in our public GitHub repository.
Related tools
- 🟫 Border Radius Generator — Generate CSS border-radius with per-corner control. Live preview.
- 🌈 CSS Gradient Generator — Build linear and radial CSS gradients with live preview. Copy the CSS.
- 🎨 CSS Box Shadow Generator — Visual box-shadow editor with live preview. Copy CSS instantly.
Why this tool
vs typical free web-tool sites
| 1vw | Typical free site | |
|---|---|---|
| Price | Free | Free |
| Signup required | No | Often (for premium features) |
| Ads inside the tool | No | Yes (banner + video) |
| Data sent to server | No (browser-only) | Yes (inputs analyzed for ads) |
| Total tools | 96 | Often <20 or scattered across sites |
| Bookmarkable URL per tool | Yes | Mixed |
| Loads in under 1s | Yes (static) | Often slow (ad tracking) |
| Multilingual | EN / ES / PT / FR / DE | Usually EN only |
| Open source | Yes | No |