CSS Reference Property

mask-border-mode

The mask-border-mode property is used to specify whether the <image> value for mask-border-source is treated as a luminance mask or an alpha mask.

Mask Modes: Alpha vs Luminance

Alpha Masks

An alpha mask is an image that has an alpha channel, and the alpha values are used as the mask values. A very simple example of an alpha channel is a simple PNG image with black and transparent areas.

mask-image
An image (PNG) with an alpha channel.

In graphics, an alpha channel is a portion of each pixel’s data that is reserved for transparency information. The alpha channel is used extensively in masking operations—it specifies how the pixel’s colors should be merged with another pixel when the two are overlaid, one on top of the other. Different parts of the image would have different levels of transparency depending on how much you wanted the masked element to show through.

In the case of a black and transparent image as the one showed above, the black areas have an alpha value of one (1), and the transparent areas have an alpha value of zero (0).

When an image with an alpha channel is used as an alpha mask, the areas where the image is black (fully opaque) are the areas where the element will be visible, and the areas where the image is transparent, the element will not show. Translucent areas will show the element with a certain level of transparent. The mask value at a given point is simply the value of the alpha channel at that point. The color channels (if present) do not contribute to the mask value.

Luminance Masks

A luminance mask is similar to an alpha mask, except that instead of using an image’s alpha channel values as mask values, the image’s luminance values should be used.

For example, a very simple luminance mask is similar to the simple alpha mask we showed above, but instead of using black areas to define where the element will show, the black areas would be white:

A simple luminance mask image with a transparent background
A simple luminance mask image with a transparent background

When a luminance mask is used, the mask value at a given point is computed from the color channel values by computing the luminance from the color channels first, and then multiplying the computed luminance value by the corresponding alpha value to produce the mask value.

A luminance mask can contain any color, not just white. The luminance value is then determined by the RGB values of the mask and the luminance coefficients as follows: luma = (0.2126 * R + 0.7152 * G + 0.0722 * B). To determine the transparency of the object, the alpha channel of the object is then multiplied by the luminance value and the alpha channel of the mask.

So, if you have a colorful image, that has some fully transparent areas, the element will not show where the image is transparent, but where the image has an alpha value of 1, the value of the mask depends on the colors used (per pixel). See the following image for an example. The masked image shows through the different colors in a different way.

Trivia & Notes

Regardless of the method used (alpha or luminance), the procedure for calculating mask values assumes the content of the mask is a four-channel RGBA graphics object. For other types of graphics objects, special handling is required as follows.

  • For a three-channel RGB graphics object that is used in a mask (e.g., when referencing a three-channel image file), the effect is as if the object were converted into a four-channel RGBA image with the alpha channel uniformly set to 1.
  • For a single-channel image that is used in a mask (e.g., when referencing a single-channel grayscale image file), the effect is as if the object were converted into a four-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1.

Also, the mask-mode and mask-type properties must have no affect on the mask border image type.

Official Syntax

  • Syntax:

    mask-border-mode: alpha | luminance
                           
  • Initial: alpha
  • Applies To: All elements. In SVG, it applies to container elements without the <defs> element and all graphics elements
  • Animatable: no

Values

alpha
A value of alpha indicates that the alpha values of the mask layer image should be used as the mask values.
luminance
A value of luminance indicates that the luminance values of the mask layer image should be used as the mask values.

Examples

The following example specifies the mask mode of the border mask image applied to an element:

.element {
    mask-border-source: url(mask.png);
    mask-border-mode: luminance;
    /* other mask border properties.. */
}
                

Live Demo

See the mask-border shorthand property entry for a live demo.

Browser Support

CSS Masks

Method of displaying part of an element, using a selected image as a mask

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 120
  • 53
  • No
  • 106
  • 15

Mobile / Tablet

  • 15
  • 122
  • No
  • 122
  • 123

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Notes

This module, as you can see in the support table above, hasn’t been fully implemented in all browsers, so you’re probably not going to be able to use all features even in browsers that have implemented certain properties (for the time being).

In the meantime, you can check out this open source feature support table by Alan Greenblatt on GitHub. The purpose of this table is to provide some insight into what the current state of affairs is with various browser implementations of CSS Clipping and Masking features.

Further Reading

Written by . Last updated December 11, 2016 at 9:40 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.