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