CSS Clip Path Generator
Pick a clip-path shape and size, and copy the CSS that trims an element into that shape.
Quick answer: enter your details below and click Generate clip-path CSS — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Developer
Enter your details below.
How to use
- Choose a shape from the list.
- Set the size percentage for circles and ellipses.
- Click Generate clip-path CSS and copy the rule into your stylesheet.
About this tool
Clip-path trims an element's visible area into a shape, so a plain rectangle can show as a circle, an ellipse, a triangle, a diamond or a rounded inset frame. Choose a shape and a size, and this tool writes the clip-path rule. The size setting controls circles and ellipses; the polygon and inset presets use fixed points that read well at any size.
Frequently asked questions
Does clip-path hide the rest of the element?
Yes. Everything outside the shape is clipped away, though the element still takes up its normal space in the layout.
Do polygon and inset presets use the size value?
No. Those presets use fixed points chosen to look balanced, while the size value controls circles and ellipses.