mask-composite

Definition

The mask-composite CSS property specifies how the mask image or mask layers should be composited with the background image or background layers. This property applies to elements that have a mask specified using the mask-image or mask-box-image property.

Examples

In this example, a div element is given a mask image that is composed using the subtract value for mask-composite. This makes the mask image appear as if it is subtracting from the background image:

div {
  mask-image: url("mask.png");
  mask-composite: subtract;
}

In this example, a div element has two mask images specified. The first mask image is composed using the multiply value for mask-composite, while the second mask image is composed using the add value for mask-composite. This results in a final mask image that combines both mask images using different composite modes:

div {
  mask-image: url("mask1.png"), url("mask2.png");
  mask-composite: multiply, add;
}

In this example, a div element is given a mask-composite value of source-over, which is the default value. This means that the mask composition will inherit the composition mode of its parent element:

div {
  mask-composite: source-over;
}

Values

Best Practices

• Avoid using too many mask images with different composite modes, as this can result in complex and unpredictable compositions that may not achieve the desired effect.
• Use simple composite modes such as source-over, add, subtract, and multiply for basic masking needs.
• Combine mask images with different blend modes for more complex masking effects.
• Consider the effect of the background image or background layers when selecting a composite mode for the mask image.
• Test the mask composition in different browsers to ensure that it is rendering correctly and consistently.

Browser Compatibility