mask-composite

The mask-composite CSS property represents a compositing operation used on the current mask layer with the mask layers below it.

When an element has multiple mask layers applied, the mask-composite property can be used to define how the multiple masks interact with each other, or are combined, in creating the final mask effect.

The number of layers is determined by the number of comma-separated values in the mask-image property value (even if a value is none). Each mask-composite value in the comma-separated list of values is matched up with a mask-image value, in order. If the number of values in mask-composite are equal to or greater than the number of mask-image values, the extra values are ignored. If the mask-composite property doesn’t have enough comma-separated values to match the number of layers, the list of values are repeated until there are enough.

Syntax example: mask-composite: add;