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
Newly available Since 2023 88% global usage
Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
120+
53+
15.4+
120+