1. css
  2. /properties
  3. /mask-composite

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

ValueDescription
addThe mask image is composited using the add blending mode.
subtractThe mask image is composited using the subtract blending mode.
intersectThe mask image is composited using the intersect blending mode.
excludeThe mask image is composited using the exclude blending mode.
differenceThe mask image is composited using the difference blending mode.
multiplyThe mask image is composited using the multiply blending mode.
screenThe mask image is composited using the screen blending mode.
darkenThe mask image is composited using the darken blending mode.
lightenThe mask image is composited using the lighten blending mode.
color-dodgeThe mask image is composited using the color-dodge blending mode.
color-burnThe mask image is composited using the color-burn blending mode.
hard-lightThe mask image is composited using the hard-light blending mode.
soft-lightThe mask image is composited using the soft-light blending mode.
hueThe mask image is composited using the hue blending mode.
saturationThe mask image is composited using the Saturation blending mode.
colorThe mask image is composited using the color blending mode.
luminosityThe mask image is composited using the luminosity blending mode.
source-overThe mask image is composited using the same composite mode as its parent element. This is the default value.

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes