clip-path & Masks
clip-path cuts an element into a shape — a circle, a polygon, a slanted edge — hiding everything outside it. Masks go further, using images or gradients to make parts of an element partly or fully transparent. Both make non-rectangular designs possible.
Basic shapes
| Function | Shape |
|---|---|
circle(radius at x y) | Circle |
ellipse(rx ry at x y) | Ellipse |
inset(top right bottom left round radius) | Rectangle cut in from the edges, optionally rounded |
polygon(x y, x y, …) | Any straight-edged shape |
path("…"), shape(…) | Curves using SVG-style path commands |
Online "clip-path makers" let you drag polygon points and copy the CSS.
Slanted section edges
Animating clip-path
Shapes of the same type (and polygons with the same number of points) can be transitioned smoothly — a popular reveal effect.
Masks with gradients
With mask-image, opaque parts of the mask keep the element visible and transparent parts hide it, with smooth gradations in between — something clip-path's hard edges can't do.
Masks with images and SVG
Using an SVG icon as a mask lets you fill it with any colour or gradient from CSS — handy for icon systems where icons must match the theme.
clip-path vs mask
clip-path | mask | |
|---|---|---|
| Edges | Hard | Soft or hard |
| Defined by | Geometric shapes or paths | Images, gradients, SVG |
| Click area | Clipped areas aren't clickable | Masked areas are still clickable |
| Best for | Shapes, reveals, section edges | Fades, icons, spotlights |