The CSS mask-type property defines if a mask defined by an SVG <mask> element is used as a luminance or an alpha mask. It applies to the <mask> element. It may be overridden by the mask-mode property which has the same effect, but applies to the element where the mask is used. Alpha masks will generally be faster to render.

/* Keyword values */
mask-type: luminance;
mask-type: alpha;

/* Global values */
mask-type: inherit;
mask-type: initial;
mask-type: unset;
Initial value luminance
Applies to <mask> elements
Inherited no
Media visual
Computed value as specified
Animation type discrete
Canonical order per grammar


One or more of the keyword values listed below, separated by commas.


Is a keyword indicating that the associated mask image is a luminance mask, that is that its relative luminance values must be used when applying it.
Is a keyword indicating that the associated mask image is an alpha mask, that is that its alpha channel values must be used when applying it.

Formal syntax

luminance | alpha


Let's apply the following rectangle as a mask:

<rect x="10" y="10" width="80" height="80"
    fill="red" fill-opacity="0.7" />
which leads to the following square:

to this box:

The result, if your browser supports the property, with different value of mask-type applied to the <mask> element are these two different squares:

mask-type: alpha; mask-type: luminance;


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

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 24 ?


20 — 521

? ? ?
Applies to HTML elements No ? 20 No No ?
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support ? ? ?


20 — 521

? ? ?
Applies to HTML elements ? ? ? 20 ? ? ?

1. From version 20 until version 52 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

  • Other mask-related properties: mask

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.