CSS Clip-Path Maker
Generate CSS clip-path shapes from presets (triangle, star, hexagon, arrow and more) with a live preview. Copy the CSS.
Pure browser JavaScript — generates CSS clip-path locally.
How to use this tool
- Pick a shape preset from the dropdown.
- Watch the live preview update.
- Copy the clip-path CSS (with the -webkit- fallback included).
Generate CSS clip-path shapes from presets (triangle, star, hexagon, arrow and more) with a live preview. Copy the CSS.
Frequently asked questions
- Why include -webkit-clip-path?
- Older WebKit browsers require the prefixed property for clip-path to work, so both lines are emitted for maximum compatibility.