CSS clip-path generator
Pick a shape, then shape it: drag the handles of a polygon, or use sliders for a circle, ellipse or inset. The CSS updates as you go.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose a shape.
- For a polygon, pick a preset and drag the handles to change it.
- For a circle, ellipse or inset, move the sliders.
- Press Copy and paste the line into your CSS.
What the output means
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); shows a triangle: the top middle, bottom left and bottom right points of the box. circle(50% at 50% 50%) is a circle centred in the box, inset(10% 10% 10% 10% round 8%) a rectangle pulled in 10 percent from every edge with rounded corners.
Example
Start with Hexagon for an avatar frame or a badge, apply the rule to an image with equal width and height, and everything outside the hexagon is hidden.
Tips
- Add an outline or shadow to a parent element, since clip-path also cuts off the element’s own border and box-shadow.
- Animate between two polygons with the same number of points for a smooth morph.
Frequently asked questions
How do I move the points of a polygon?
Drag a handle with a mouse, finger or pen. Keyboard users can tab to a handle and press the arrow keys to move it by one percent. Points are kept inside the box and rounded to whole percents.
What do the percentages refer to?
Polygon points are measured from the top-left corner of the element's box, 0% 0% being the corner and 100% 100% the opposite one. Circle radii use the box's reference size, so a circle at 50% fills a square box.
Does clip-path change the layout?
No. The element keeps its full size and place; only the visible part is cut. Clicks outside the shape also do not reach the element.
Do all browsers support it?
The shapes used here, polygon(), circle(), ellipse() and inset(), are supported by current versions of Chrome, Edge, Firefox and Safari.