Themask-modeCSS property is set on the element being masked. It sets whether the mask reference defined by themask-image is treated as a luminance or alpha mask.

Syntax

/* Keyword values */mask-mode: alpha;mask-mode: luminance;mask-mode: match-source;/* Multiple values */mask-mode: alpha, match-source;/* Global values */mask-mode: inherit;mask-mode: initial;mask-mode: revert;mask-mode: revert-layer;mask-mode: unset;

Values

Themask-mode property can take multiple comma-separated<masking-mode> keyword values, including:

alpha

Indicates that the alpha (transparency) values of the mask image should be used.

luminance

Indicates that theluminance (brightness) values of the mask image should be used.

match-source

Indicates that the type of mask is determined by the source. This is the default property value.

• If themask-image references an SVG<mask>, itsmask-type property value is used, or it'smask-type attribute, if present. If neither is explicitly set, this value defaults toluminance.
• If the mask image source is an<image> or a<gradient>, thealpha values of the mask image are used.

Description

A mask transfers its transparency, and depending on the mask type, it's luminance, to the element it is masking.If the mask is of type<image>, by default the alpha values of the mask image determine the visibility of each part of the masked element: where the mask is opaque, the corresponding part of the masked element is visible; where the mask is translucent, the element is as well, with those areas of the element being hidden. This is the default behavior for<image> masks when themask-mode property is set to or defaults tomatch-source, and it is always the case when themask-mode is explicitly set toalpha.

Understanding luminance

In the case ofluminance masks, the visibility of the masked element depends on both the opacity of the mask and the lightness of the color of the opaque areas. White (100% luminance) opaque areas (alpha = 1) will be masked and visible, and black areas (0% luminance) transparent (alpha = 0) will be clipped. Areas with colors in between white and black and with partial opacity will be partially masked, reflecting the luminance and alpha transparency of each color making up the mask.

The opacity of aluminance mask is determined by theR,G,B, andA values of anrgb() color using the formula:

((0.2125 * R) + (0.7154 * G) + (0.0721 * B)) * A

For example, the colorgreen is#008000 orrgb(0% 50% 0% / 1). In aluminance mask, any area masked by a solidgreen mask will be35.77% opaque. If themask-mode for this mask is set toalpha, sincegreen is a fully opaque color, the masked area will be100% opaque.

Multiple values

Eachmask-mode value is a comma-separated list of values. When multiple values are present, each value corresponds to a mask layer in the same position in themask-image property. The values define whether the associated mask images are treated as aluminance or analpha mask.

Understandingmatch-source

In the case ofmatch-source, whetherluminance oralpha is used depends on the mask mode of the mask source. If themask-image property values is a reference to an SVG<mask> element, the<mask> element'smask-type property value is used. If there is no CSSmask-type property set on the<mask> element, the value of the<mask> element'smask-type attribute is used, if present and supported. If neither is explicitly set, this value defaults toluminance; but only in the case of the<mask> element as the mask source. Otherwise, as noted before, if the mask image source is an<image>, rather than an SVG<mask>, thealpha values of the mask layer image is used.

Formal definition

Formal syntax

mask-mode =
<masking-mode>#

<masking-mode> =
alpha|
luminance|
match-source

Examples

Usage and values

This example demonstrates the basic usage and different values of themask-mode property.

HTML

We include three<div> elements, so we can demonstrate the three enumeratedmask-mode keyword values.

<div>ALPHA</div><div>LUMINANCE</div><div>MATCH-SOURCE</div>

CSS

Each<div> is provided with the same background and masking image. The only difference between each<div> is the value of themask-mode property:

div {  background: blue linear-gradient(red, blue);  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");}.alpha {  mask-mode: alpha;}.luminance {  mask-mode: luminance;}.matchSource {  mask-mode: match-source;}

div {  width: 227px;  height: 200px;  float: left;  text-align: center;  line-height: 65px;  color: white;  text-shadow: 1px 1px 2px black;  font-family: sans-serif;}

Results

Because the mask source is an<image> and not an SVG<mask>, thematch-source value resolves toalpha.

Specifications

Browser compatibility

See also

• mask-type
• mask-image
• mask shorthand
• Introduction to CSS masking
• CSSmask properties
• Declaring multiple masks
• CSS masking module