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.
Quick example
.fade-out {
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
/* fades out the bottom half of the element */
}Quick facts
Initial value
noneInherited
No
Applies to
all elements and SVG container elements
Animation type
discrete
mask-image 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+