MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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 valueluminance
Applies to<mask> elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

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

Values

luminance
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.
alpha
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

Examples

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;

Specifications

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

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (for SVG) 24.0 35.0 (35.0)[1] No support 15.0 7
Applies to HTML elements No support 35.0 (35.0)[1] No support No support ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (for SVG) ? 35.0 (35.0)[1] No support 15.0 No support
Applies to HTML elements ? ? ? ? ?

[1] Available since Gecko 20 (Firefox 20.0 / Thunderbird 20.0 / SeaMonkey 2.17) behind the preference layout.css.masking.enabled, defaulting to false. That preference was removed in Gecko 52 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) (see bug 1308239).

See also

  • Other mask-related properties: mask

Document Tags and Contributors

 Last updated by: wbamberg,