✂️ CSS Clip-Path Generator
CSS
clip-path: circle(50% at 50% 50%);
Choose from common shape presets — circle, ellipse, triangle, rhombus, pentagon, hexagon, star, arrow, and more — to generate clip-path CSS code, with a live preview. Handy for clipping an image or element into a specific shape during design work.
How to use
- Click the shape preset you want to use.
- The preview above shows the actual clipping result.
- Use "Copy" to copy the generated CSS code and paste it into your stylesheet.
FAQ
Can I fine-tune the vertex coordinates myself?
No, the current version only supports selecting from preset shapes. For finer control, manually edit the coordinate values in the generated polygon().
Is clip-path supported in all browsers?
It's broadly supported in major modern browsers (Chrome, Firefox, Safari, Edge), but older browsers may not support it.
Can this be used on elements other than images?
Yes, clip-path can be applied to any HTML element, like a div or a button.