mask-type

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	the 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" />

mask

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80"
      fill="red" fill-opacity="0.7"/>
</svg>

which leads to the following square:

to this box:

box

.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
}

<div class="redsquare"></div>

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;

<div class="redsquare"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox"
        style="mask-type:alpha">
      <rect x=".1" y=".1" width=".8" height=".8"
          fill="red" fill-opacity="0.7"/>
    </mask>
  </defs>
</svg>

.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}

<div class="redsquare"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox"
        style="mask-type:luminance">
      <rect x=".1" y=".1" width=".8" height=".8"
          fill="red" fill-opacity="0.7"/>
    </mask>
  </defs>
</svg>

.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}

Specifications

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

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).