Painting, not cropping
A clip path defines the region of an element that gets painted. Everything outside it is not drawn. Nothing is cropped, resized or removed — the element keeps its full size in the layout and still occupies its whole rectangle.
That distinction accounts for most of the surprise. A clipped element sitting beside a paragraph leaves a rectangular gap, because neighbouring content flows around the box rather than around the visible shape. If you want text to wrap to the shape, that is shape-outside, a separate property that happens to take the same values.
The [msm_tool slug="clip-path-generator"] covers polygons, circles, ellipses and insets, with the coordinates as percentages so the shape scales with the element.
Percentages, and why they matter
Coordinates are percentages of the element's own box. A polygon defined that way holds its proportions whatever size the element becomes, which is what makes clip paths usable in responsive layouts.
Pixel coordinates are legal and almost always wrong for this reason: a shape tuned at 800 pixels wide is a different shape at 320, and usually a broken one.
The hard edge
Clipping is binary. There is no feathering and no partial transparency at the boundary — a pixel is either painted or it is not. Diagonal edges are antialiased by the browser so they do not look jagged, but the shape itself has no soft falloff.
If you want a gradual fade, that is a mask rather than a clip. mask-image with a gradient does what people often expect clip-path to do.
Animating between shapes
Two polygons with the same number of points interpolate smoothly, and browsers handle it well. That is how the sliding diagonal reveals and morphing shapes in modern hero sections are built.
Two polygons with different point counts do not interpolate — the change is abrupt. The workaround is to give both shapes the same number of points and place the surplus ones on top of each other, so a triangle described with six points can morph into a hexagon.
Different shape functions never interpolate. A circle does not animate into a polygon.
Content is hidden, not removed
Text clipped out of view is still in the document and still read aloud by a screen reader. So are links, which remain focusable and can send a keyboard user to a part of the page they cannot see.
Never use a clip path to hide something that should not be announced. If content should be gone, remove it, or use display: none or the hidden attribute. Clipping is a visual operation only.
The same applies to pointer events: the clipped-away region stops receiving them, which is usually helpful, but it means a button clipped in half only responds on the visible portion.
The common uses
- Angled section dividers. A polygon on a section with a slanted top or bottom edge, replacing the older technique of a rotated pseudo-element or a background SVG.
- Circular avatars. Though
border-radius: 50% is simpler and better supported for that specific case.
- Reveal animations. An inset that starts at full coverage and animates open.
- Non-rectangular images without producing a transparent PNG for every shape.
The rounding option only applies to inset
Polygons and circles have no corners to round, so the rounding control does nothing until you switch to the inset shape. That is not a limitation of the tool; the CSS round keyword is only valid within inset().
The prefix
The value is emitted twice, once with the WebKit prefix, which older Safari versions still require. Current browsers use the unprefixed property, and there is no cost to shipping both.
What to check
Resize the element. A shape that looks right at one width and collapses at another is the commonest fault, and percentage coordinates make it far less likely but do not eliminate it — an extreme aspect ratio can still distort a polygon into something unintended.