This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The mask-mode
CSS property indicates 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;
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 |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
Syntax
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 syntax
<masking-mode>#
Example
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.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | No | ? | 53 | No | No | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | No | ? | ? | 53 | No | No | No |
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
mfluehr,
wbamberg,
chrisdavidmills,
teoli,
Sebastianz,
yisibl,
Siilwyn,
rolfedh
Last updated by:
fscholz,