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.
It is documented as part of the CSS Masking specification.
Syntax
/* Usage Example */
.masked-image {
mask: linear-gradient(black, transparent);
/* fades the image out from top to bottom */
}
/* Global values */
mask: inherit;
mask: initial;
mask: revert;
mask: revert-layer;
mask: unset;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.
120+
53+
15.4+
120+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more