rick@tillitsdone.com

+66824564755

Scroll to discover

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

These resources will help you create more advanced and visually appealing web designs using CSS masking and compositing.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-animation.png

CSS Animation Enhance Web Design with Dynamic Effects Explore CSS animation to create dynamic and engaging web pages. Learn about key properties like duration, timing, and direction to enhance user experience.

css_property_cover/css-property-animation-delay.png

CSS Animation-Delay Essential Guide for Web Design Discover how to use CSS animation-delay to enhance your web designs. Learn about its options, including time values, inherit, initial, revert, and unset.

css_property_cover/css-property-animation-duration.png

CSS Animation-Duration Enhance Your Web Designs Learn how to use CSS animation-duration to control animation timing. Options include seconds, milliseconds, inherit, initial, revert, and more.

css_property_cover/css-property-animation-fill-mode.png

CSS Animation-Fill-Mode Control Animation Styles Learn how to use the CSS animation-fill-mode property to control the styles of elements before and after animations. Discover available options like forwards, backwards, both, and more.

css_property_cover/css-property-appearance.png

CSS Appearance Customize UI Elements for Native Look Learn how to use the CSS appearance property to customize UI elements like buttons and checkboxes for a native look. Explore standard, compatibility, and non-standard values.

css_property_cover/css-property-backface-visibility.png

CSS Backface-Visibility A Comprehensive Guide Learn about CSS backface-visibility, its use cases in 3D transformations, and available options like visible and hidden. Enhance your web designs with this powerful property.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.