CSS mask-composite property

Last Updated : 26 Aug, 2022

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 :

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 22%;
            height: 200px;
            background: green;
            -webkit-mask-image:
                url("image.svg"),
                url("image2.svg");
            -webkit-mask-size: 140px, 120px;
            -webkit-mask-position: 140px 60px, 50px;
            -webkit-mask-repeat: no-repeat;
            mask-composite: add;
        }
    </style>
</head>
<body>
    <div class="geeks"></div>
</body>
</html>

Output:

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

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 22%;
            height: 200px;
            background: green;
            -webkit-mask-image:
                url("image.svg"),
                url("image2.svg");
            -webkit-mask-size: 140px, 120px;
            -webkit-mask-position: 140px 60px, 50px;
            -webkit-mask-repeat: no-repeat;
            mask-composite: subtract;
        }
    </style>
</head>
<body>
    <div class="geeks"></div>
</body>
</html>