mask-composite
Defines how multiple mask layers should be combined together (e.g., should they be added, subtracted, or intersected).
Quick example
.layered-mask {
mask-image: url(mask1.png), url(mask2.png);
/* Subtracts the second mask from the first */
mask-composite: subtract;
}Quick facts
Initial value
addInherited
No
Applies to
all elements and SVG container elements
Animation type
discrete
mask-composite 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+