Skip to content
Visuals and effects

mask

Masks an element using the alpha or luminance of an image or gradient. Unlike `clip-path`, a mask can create soft transitions.

41 effects in the catalog use this property.

Syntax

mask: <image> <position> / <size> <repeat>;

Watch out

Opaque mask areas reveal the element and transparent areas hide it. Soft fades are commonly made with `mask-image: linear-gradient(#000, transparent)`.

Effects using mask

These are working effects from the catalog. Open a tile to inspect the full source.