How css clip path generator works
clip-path hides the parts of an element outside a geometric region, and the generator covers the four basic-shape functions. circle(R% at X% Y%) keeps everything within R percent of the reference shape from a center point; ellipse(RX% RY% at X% Y%) does the same with separate horizontal and vertical radii; inset() shrinks each side inward by a percentage, with an optional border-radius-style round for cropped cards with soft corners.
Polygon mode clips to a vertex list you pick from a preset gallery: triangle, diamond, pentagon, hexagon, star, and arrow. Each vertex is an x/y pair in percentages of the box, and the browser connects the points in order and clips outside the resulting polygon — the technique behind hero-image diagonals, avatar blobs, and notched badges. The percentages are the numbers worth learning to read; the generator writes them for you.
The preview applies the identical clip-path declaration to a sample block, so radii and offsets are tuned visually before copying. Two habits make clip-path predictable: percentages are relative to the element's own box (so the same circle crops differently on a wide banner and a square tile), and clipping is purely visual — pointer events on hidden regions still fire, so avoid clipping interactive controls. Pair it with the border-radius generator when a rounded rectangle is all you need.