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

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