mask-image
Sets the image that will be used as the masking layer for an element. It allows you to selectively hide parts of an element using gradients or transparent images.
It is documented as part of the CSS Masking specification.
Syntax
/* Usage Example */
.fade-out {
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
/* fades out the bottom half of the element */
}
/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
mask-image: unset;mask-image 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