✂️ CSS Clip-Path Generator
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.
How the calculation works
The CSS clip-path property cuts an element to a shape and shows only what is inside it. Pick a common shape — circle, triangle, hexagon, star and so on — and this tool shows the clip-path value with a preview. • circle(radius at x y): a circle • ellipse(rx ry at x y): an ellipse • polygon(x1 y1, x2 y2, …): a polygon joining the points in order Coordinates are percentages of the element, with 0% 0% at the top left and 100% 100% at the bottom right. The triangle polygon(50% 0%, 0% 100%, 100% 100%) joins the top centre, bottom left and bottom right.
Worked example
Triangle clip-path: polygon(50% 0%, 0% 100%, 100% 100%); Hexagon clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); Circle clip-path: circle(50% at 50% 50%); Applying the circle to a square photo turns it into a round avatar.
Things to be aware of
- The clipped-away area no longer responds to clicks or other pointer events.
- box-shadow and borders are clipped too. For a shadow, use filter: drop-shadow() on a parent element.
- With transition, you can animate smoothly between polygons that have the same number of points.
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.