mask
A shorthand property that allows you to hide or partially hide parts of an element using an image or a gradient. It's like using a stencil to cut a shape out of an element.
Quick example
.masked-image {
mask: linear-gradient(black, transparent);
/* fades the image out from top to bottom */
}Quick facts
Initial value
See individual propertiesInherited
No
Applies to
all elements and SVG container elements
mask Browser Support
Widely availableSince 202388% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
120+
53+
15.4+
120+