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

mask-mode

Definition

The mask-mode CSS property specifies how the mask image should be used to composite an element's background and content. It defines how the opacity of the mask image should be combined with the opacity of the element's background and content.

Examples

In this example, a div element is given a mask image that is a PNG file named "mask.png". The mask mode is set to alpha, which means that the mask image's alpha channel will be used to mask the element's content and background:

div {
  mask-image: url("mask.png");
  mask-mode: alpha;
}

In this example, a div element is given a mask image that is a PNG file named "mask.png". The mask mode is set to luminance, which means that the mask image's luminance values will be used to mask the element's content and background:

div {
  mask-image: url("mask.png");
  mask-mode: luminance;
}

In this example, a div element is given a mask image that is a PNG file named "mask.png". The mask mode is set to match-source, which means that the mask image's opacity will be multiplied with the element's content and background:

div {
  mask-image: url("mask.png");
  mask-mode: match-source;
}

Values

ValueDescription
alphaThe mask image's alpha channel will be used to composite the element's background and content. This is the default value.
luminanceThe mask image's luminance values will be used to composite the element's background and content.
match-sourceThe mask image's opacity will be multiplied with the element's background and content, similar to the multiply blend mode in Photoshop.
color-dodgeThe mask image's opacity will be inverted, and then the result will be divided by the inverse of the element's opacity. This creates a brightening effect on the element's content and background where the mask is opaque.
color-burnThe mask image's opacity will be inverted, and then the result will be divided by the element's opacity. This creates a darkening effect on the element's content and background where the mask is opaque.
hard-lightThe mask image's opacity will be used to create a screen effect on the element's content and background, similar to the hard light blend mode in Photoshop.
soft-lightThe mask image's opacity will be used to create a softening effect on the element's content and background, similar to the soft light blend mode in Photoshop.
differenceThe mask image's opacity will be subtracted from the element's opacity, creating a negative effect on the element's content and background where the mask is opaque.
exclusionThe mask image's opacity will be subtracted from the element's opacity, creating a more subtle negative effect on the element's content and background where the mask is opaque

Best Practices

  • Use the alpha mask mode by default: The alpha mask mode is the default value for mask-mode, and is the most commonly used. It uses the alpha channel of the mask image to composite the element's background and content.
  • Consider using other mask modes for special effects: While the alpha mask mode is the most commonly used, the other mask modes can be useful for creating special effects. For example, match-source can be used to create a "frosty glass" effect.
  • Use high-contrast mask images: Mask images with high contrast are more effective at masking an element's content and background. Make sure the mask image has strong, distinct shapes or colors that contrast well with the element's background.
  • Test in multiple browsers: The mask-mode property is supported in most modern browsers, but it's still a good idea to test your code in multiple browsers to ensure cross-browser compatibility.
  • Consider performance: The mask-mode property can be computationally expensive, especially when using the luminance mask mode. Keep this in mind when designing your page, and consider using simpler masks or reducing the size of the mask image if possible.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoNoYes