CSS mask-composite property

The mask-composite property defines multiple composite operations to combine multi-mask layers. The first URL layer is at the top and the last URL layer is at the bottom of all the layers.

Syntax:

mask-composite: Keyword values
/* Or */
mask-composite: Global values

Property values: This property accepts values mentioned above and described below:

• Keyword values: This property value refers to the values defined with units like add, subtract, intersect, exclude, etc.
• Global values: This property value refers to the values defined with units like inherit, initial, unset, etc

Example 1: Below example illustrates the mask-composite property using add :

Output:

👁 Image

Example 2: Below example illustrates the mask-composite property using subtract :

Output:

👁 Image

Browsers Supported:

• Firefox 53
• Safari 15.4