CSS Mask-Composite Powerful Compositing Tool

Discover the CSS mask-composite property, a powerful tool for combining mask layers.

Use add, subtract, intersect, and exclude options to create complex visual effects.

The `mask-composite` CSS Property

The mask-composite CSS property allows you to combine multiple mask layers by specifying how they should interact with each other. You can add, subtract, intersect, or exclude layers to create complex visual effects.

Baseline 2023

As of December 2023, the mask-composite CSS property is supported across the latest devices and browser versions. Always test it in your target environments to ensure compatibility.

Description

The mask-composite property lets you define how multiple mask layers interact. It uses keyword values like add, subtract, intersect, and exclude, each representing a different compositing operation. Global values like inherit, initial, revert, revert-layer, and unset provide general control over the property’s behavior.

Syntax

Here’s how to use the mask-composite property:

/* Keyword values */
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

/* Global values */
mask-composite: inherit;
mask-composite: initial;
mask-composite: revert;
mask-composite: revert-layer;
mask-composite: unset;

Values

add: The source is placed over the destination.
subtract: The source is placed where it falls outside of the destination.
intersect: The parts of the source that overlap the destination replace the destination.
exclude: The non-overlapping regions of the source and destination are combined.
inherit: Inherits the value from its parent element.
initial: Sets the property to its default value.
revert: Resets the property to its parent element’s specified value if it is inheritable.
revert-layer: Resets the property to its parent layer’s value.
unset: Resets the property to its initial value if it is not inheritable, or to its inherited value if it is inheritable.

Formal Definition

Initial Value: add
Applies To: All elements in HTML, and container elements in SVG (excluding <defs> and graphics elements).
Inherited: No
Computed Value: Same as the specified value.
Animation Type: Discrete

Formal Syntax

mask-composite = <compositing-operator>#

<compositing-operator> = add | subtract | intersect | exclude

Examples

Adding Mask Layers

Overlay the current mask layer on top of the layers below it using the add keyword.

<!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>

Subtracting Mask Layers

Subtract the area of the current mask layer from the layers below it using the subtract keyword.

<!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>

Intersecting Mask Layers

Ensure that only the overlapping areas of the mask layers are visible using the intersect keyword.

<!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: intersect;
        }
    </style>
</head>
<body>
    <div class="geeks"></div>
</body>
</html>

Excluding Mask Layers

Combine the non-overlapping regions of the mask layers using the exclude keyword.

<!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: exclude;
        }
    </style>
</head>
<body>
    <div class="geeks"></div>
</body>
</html>

Specifications

The mask-composite property is defined in the CSS Masking Module Level 1 specification. This module outlines the behavior and usage of masking properties in CSS, ensuring consistency across different browsers and platforms.

Specification:

CSS Masking Module Level 1 - mask-composite

Browser Compatibility

Here’s a quick summary of the browser compatibility for the mask-composite property:

Firefox: Supported in Firefox 53 and later.
Safari: Supported in Safari 15.4 and later.

For the most accurate and up-to-date information on browser compatibility, check out the Browser Compatibility Data (BCD) tables.

Clipping and Masking in CSS: An in-depth guide on CSS clipping and masking techniques. WebsiteUrl
CSS Masking Module Level 1: The official specification for CSS masking, with detailed information on how masking properties work. WebsiteUrl
CSS mask-image Property: Learn how to apply custom images as masks using the mask-image property. WebsiteUrl
CSS mask-clip Property: Understand how to control the clipping area of a mask using the mask-clip property. WebsiteUrl
CSS mask-origin Property: Discover how to set the positioning area of a mask image using the mask-origin property. WebsiteUrl