CSS Clip-Path Generator

clip-path defines a region, and only the part of the element inside it is painted. Everything outside, including the background, borders, box-shadow and child content, is cut away. The element still takes up its full rectangle in the layout, so clipping never makes surrounding content reflow.

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

Clipped-away areas also stop receiving clicks and hovers, so a clipped button is only clickable inside its visible shape. The property is defined in the CSS Masking specification, and the shape functions in CSS Shapes.

After the shape you can name a reference box, such as polygon(...) content-box. Without one, coordinates are measured against the border box.

Each point is an x y pair. The origin is the element's top-left corner, x grows to the right and y grows down, so 100% 100% is the bottom-right corner. Percentages are relative to the element's own width (for x) and height (for y), which is why a percentage polygon stretches with the element. Pixel values stay fixed.

The browser joins the points in order and closes the shape back to the first point, so the order matters: crossing edges create a bow-tie. To cut a hole, as in the Frame preset, trace the outer edge, step inward along a zero-width slit, trace the inner edge the opposite way and step back out. With the default nonzero fill rule the opposite winding leaves the middle empty; polygon(evenodd, ...) makes any overlapping loop a hole regardless of direction.

/* A right-pointing block arrow: 7 points, clockwise from the tail */
.arrow {
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

Browsers interpolate clip-path only between the same shape function. Two polygons must also have the same number of points (and the same fill rule); otherwise the change jumps instead of morphing. When one shape has fewer points, pad it with duplicates sitting on top of each other:

.badge {
  /* A triangle written with 4 points: the first two are the same */
  clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%);
  transition: clip-path 0.4s ease;
}
.badge:hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
@media (prefers-reduced-motion: reduce) {
  .badge { transition: none; }
}

Circles animate radius and center, insets animate each offset and the corner radius, so a circle(0% at 50% 50%) to circle(75% at 50% 50%) transition is the classic circular reveal.

Reach for clip-path when the edge is a crisp geometric line, and mask when you need partial transparency.

Clipping removes everything the element paints outside the shape, and a box-shadow sits outside the shape by definition. Focus outlines are clipped too. The fix is to move the shadow to a wrapper and use filter: drop-shadow(), which follows the visible pixels rather than the box:

.shape-shadow {
  filter: drop-shadow(0 10px 16px rgb(0 0 0 / 0.25));
}
.shape-shadow > .shape {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

Build the shadow values with the box shadow generator in drop-shadow mode, and give clipped buttons a focus style that stays inside the shape, such as an inset ring or a color change.