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
Examples
Using alpha mask mode
CSS
#masked { width: 227px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); mask-mode: alpha; /* Can be changed in the live sample */ }
HTML
<div id="masked"> </div> <select id="maskMode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select>
JavaScript
var maskMode = document.getElementById("maskMode"); maskMode.addEventListener("change", function (evt) { document.getElementById("masked").style.maskMode = evt.target.value; });
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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