Quick Start
- Visit HeronTool's Clip-Path Generator page.
- Select a preset shape (circle, polygon, or custom path) on the canvas, or draw directly by dragging control points.
- Adjust the coordinate values in the right parameter panel to fine-tune each vertex.
- 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-pathvalue 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.
