Color & CSS
CSS Clip-Path Generator
The CSS Clip-Path Generator shows a live preview of common shapes -- circle, triangle, pentagon, hexagon and more -- and gives you the exact CSS clip-path code to recreate them.
Pick a shape from the dropdown, see it rendered instantly, and copy the CSS straight into your stylesheet.
How to Use the CSS Clip-Path Generator
- Open the CSS Clip-Path Generator.
- Choose a shape from the dropdown.
- See the live preview update.
- Copy the generated CSS clip-path code into your project.
Frequently Asked Questions
Which shapes are included?
Circle, ellipse, triangle, pentagon, hexagon and an arrow shape -- a solid set of common clip-path presets.
Does clip-path work in all browsers?
clip-path is well supported in modern browsers, though it's always worth checking support for your specific audience if it's critical to your design.
Is anything uploaded when I use this tool?
No. Everything runs locally in your browser -- nothing is sent to a server.
Advertisement
Sponsored