Quick Start

  1. Visit HeronTool's Clip-Path Generator page.
  2. Select a preset shape (circle, polygon, or custom path) on the canvas, or draw directly by dragging control points.
  3. Adjust the coordinate values in the right parameter panel to fine-tune each vertex.
  4. Preview the result in real time, then click “Copy CSS” – the code is automatically generated and copied to your clipboard.

Practical Tips

  • Responsive Design: Use percentage units (e.g., 50%) instead of pixels to ensure the shape adapts across different screens.
  • Animation: Integrate the generated clip-path value into CSS transitions or keyframes for smooth shape morphing.
  • Masking & Backgrounds: Apply the clip path to an image container to create circular avatars, irregular cards, and other visual effects.

FAQ

Q: How to reset to default shape?
A: Click the “Reset” button on the generator – all points return to their initial positions.

Q: Can I export SVG paths?
A: Currently it outputs CSS clip-path syntax directly. For SVG, you can manually convert.

Q: Browser compatibility?
A: All modern browsers support it. Add the -webkit- prefix for older Safari versions.