Web/CSS/mask-type

The mask-type CSS property sets whether an SVG <mask> element is used as a luminance or an alpha mask. It applies to the <mask> element itself.

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

/* Global values */
mask-type: inherit;
mask-type: initial;
mask-type: unset;

This property 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.

Syntax

The mask-type property is specified as one of the keyword values listed below.

Values

luminance

Is a keyword indicating that the associated mask image is a luminance mask, i.e., 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, i.e., that its alpha channel values must be used when applying it.

Formal definition

Initial value	luminance
Applies to	<mask> elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

luminance | alpha

Examples

Setting an alpha mask

HTML

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

CSS

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

Setting a luminance mask

HTML

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

CSS

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

Specifications

Specification	Status	Comment
CSS Masking Module Level 1The definition of 'mask-type' 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.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
mask-type	Chrome Full support 24	Edge Full support 79	Firefox Full support 35 Full support 35 No support 20 — 52 Disabled' Disabled' 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.	IE No support No	Opera Full support 15	Safari Full support 6.1	WebView Android Full support 37	Chrome Android Full support 25	Firefox Android Full support 35 Full support 35 No support 20 — 52 Disabled' Disabled' 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.	Opera Android Full support 14	Safari iOS Full support 7	Samsung Internet Android Full support 1.5

Legend

Full support  

Full support

No support  

No support

User must explicitly enable this feature.'

User must explicitly enable this feature.

See also

• Other mask-related properties: mask, mask-mode

mask-type by Mozilla Contributors is licensed under CC-BY-SA 2.5.