Clip-Path Generator

How CSS clip-path works

clip-path draws an invisible stencil over an element. Everything inside the shape stays visible and everything outside disappears, including backgrounds, borders, shadows and pointer events. The element still takes up its full rectangular box in the layout, so neighbors do not move when you clip it.

The four basic shape functions cover almost everything you will need:

• polygon() takes a list of x and y pairs. Percentages are relative to the element box, so 50% 0% is top center. This is what the draggable editor writes.
• circle(40% at 50% 50%) clips to a circle. Percentage radii are measured against the box diagonal divided by the square root of two, which is why 50% does not always touch the edges of a wide box.
• ellipse(45% 35% at 50% 50%) takes separate horizontal and vertical radii.
• inset(10% 5% round 16px) shrinks the box from each side and can round the corners, like a cropped border-radius.

Building a polygon by hand

Points are connected in order and the last point joins back to the first. Order matters: if two edges cross, you get a bow tie instead of a solid shape. Work clockwise from the top left and you will rarely have trouble. In the editor, clicking on an edge inserts a new point exactly where you clicked, between the two points that edge connects, so the winding order always stays correct.

/* angled hero section bottom edge */
.hero {
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
}

/* morph on hover: both shapes have 4 points */
.badge {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: clip-path 0.4s cubic-bezier(.2, .7, .2, 1);
}
.badge:hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

Animating shapes

The browser can tween between two polygons only when both have the same number of points. To morph a triangle into a square, write the triangle with four points and let two of them sit on the same coordinate. The same rule applies between two circle() values or two inset() values, but not across different functions.

Shadows on clipped elements

Because clipping removes anything outside the shape, box-shadow vanishes. Put the clipped element inside a wrapper and give the wrapper filter: drop-shadow(0 10px 20px rgba(0,0,0,.25)). The drop shadow is computed from the rendered pixels, so it hugs your polygon.

Practical uses

Slanted section dividers, hexagon avatar grids, ribbon tags, speech bubbles, arrow-shaped step indicators and image reveals on scroll are all one line of CSS with clip-path. For reveals, animate an inset() from inset(0 100% 0 0) to inset(0 0 0 0) for a clean wipe that never triggers layout.

Frequently asked questions