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.
Usage example
.masked-image {
mask: linear-gradient(black, transparent);
/* fades the image out from top to bottom */
}Initial value
See individual properties
Inherited
No
Applies to
allElementsSVGContainerElements
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+