ADVERT
CSS Clip Path Generator
Create clip-path shapes visually with a live preview and copy the CSS for your elements, with presets for circle, ellipse, inset, and polygon masks fast.
How to use this tool
- Choose a clip-path preset or switch to custom polygon mode.
- Adjust preview size/background and drag custom points on canvas.
- Copy the generated `clip-path` CSS and apply it to your element.
Common use cases
- Create non-rectangular media cards and hero cutouts.
- Prototype decorative masks for marketing sections.
- Build polygonal badges and abstract shape overlays.
Editing tips
- Disable clip while editing to keep full-image context visible.
- Use custom mode for precise vertex-level polygon control.
- Test on varied backgrounds to confirm visual legibility.
FAQ
- Can I edit polygon points directly?
- Yes. In Custom mode, drag handles to reposition polygon vertices.
- Does this support non-polygon presets too?
- Yes. Circle, ellipse, and inset presets are included.
- Is output ready for CSS usage?
- Yes. The generated `clip-path` declaration is copy-ready.
ADVERT
ADVERT