mask-composite
Defines how multiple mask layers should be combined together (e.g., should they be added, subtracted, or intersected).
It is documented as part of the CSS Masking specification.
Syntax
/* Usage Example */
.layered-mask {
mask-image: url(mask1.png), url(mask2.png);
/* Subtracts the second mask from the first */
mask-composite: subtract;
}
/* Global values */
mask-composite: inherit;
mask-composite: initial;
mask-composite: revert;
mask-composite: revert-layer;
mask-composite: unset;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.
120+
53+
15.4+
120+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more