CSS Clip-Path Generator
Developer utilities: formatters, validators, encoders, and testers.
What does this tool do?
Clip any element into triangles, stars, polygons, circles and more. Choose a preset shape or click on the canvas to draw your own custom polygon, then copy the clip-path CSS.
Key features
- Syntax validation
- Format & minify
- Error highlighting
- Copy formatted output
Clip any element into triangles, stars, polygons, circles and more. Choose a preset shape or click on the canvas to draw your own custom polygon, then copy the clip-path CSS.
Shape
CSS Output
How to Use
- Choose a preset shape from the dropdown, or select "Custom polygon" and click inside the canvas to place points.
- Watch the blue shape clip live as you add points.
- Click Copy CSS and apply the clip-path rule to any element in your stylesheet.
Core Features
- 7 ready-made presets: triangle, diamond, pentagon, hexagon, star, circle, ellipse
- Interactive custom polygon editor - click to add points, clear to restart
- Live preview with instant CSS output
- 100% client-side, free forever, no signup
Frequently Asked Questions
Does clip-path work in all browsers?
clip-path with polygon(), circle() and ellipse() is supported in all modern browsers. Internet Explorer does not support it, so provide a fallback for legacy users if needed.
How do I clip an image instead of the blue box?
Copy the generated clip-path line and apply it to your own element, for example: img.hero { clip-path: polygon(...); }. The shape scales with the element automatically.
How to Use CSS Clip-Path Generator
Reviews & Comments
No reviews yet. Be the first to share your experience!
Your feedback helps others discover great tools.