Web/CSS/mask-mode

The mask-mode CSS property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.

/* 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: unset;

Syntax

The mask-mode property is specified as one or more of the keyword values listed below, separated by commas.

Values

alpha

This keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.

luminance

This keyword indicates that the luminance values of the mask layer image should be used as the mask values.

match-source

If the mask-image property is of type <mask-source>, the luminance values of the mask layer image should be used as the mask values.

If it is of type <image>, the alpha values of the mask layer image should be used as the mask values.

Formal definition

Initial value	match-source
Applies to	all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

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

Specifications

Specification	Status	Comment
CSS Masking Module Level 1The definition of 'mask-mode' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
mask-mode	Chrome No support No	Edge No support No	Firefox Full support 53	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 53	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support  

Full support

No support  

No support

mask-mode by Mozilla Contributors is licensed under CC-BY-SA 2.5.