mask-type

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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.

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

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

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

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

mask-type = 
  luminance  |
  alpha

Examples

Setting an alpha mask

HTML

<section>
  <div class="red-square"></div>
</section>

<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">
      <rect
        x=".2"
        y=".1"
        width=".4"
        height=".8"
        fill="yellow"
        fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

CSS

* {
  margin: 0px;
  padding: 0px;
}

section {
  width: fit-content;
  border: 1px solid blue;
}

.red-square {
  height: 100px;
  width: 100px;
  background-color: red;
  border: solid 1px black;
  mask: url("#m");
}

mask {
  mask-type: alpha;
}

Result

Setting a luminance mask

HTML

<section>
  <div class="red-square"></div>
</section>

<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">
      <rect
        x=".2"
        y=".1"
        width=".4"
        height=".8"
        fill="yellow"
        fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

CSS

* {
  margin: 0px;
  padding: 0px;
}

section {
  width: fit-content;
  border: 1px solid blue;
}

.red-square {
  height: 100px;
  width: 100px;
  background-color: red;
  border: solid 1px black;
  mask: url("#m");
}

mask {
  mask-type: luminance;
}

Result

Specifications

Specification
CSS Masking Module Level 1
# the-mask-type

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
mask-type 24 79 35 15 7 25 35 14 7 1.5 4.4
alpha 24 79 35 15 7 25 35 14 7 1.5 4.4
luminance 24 79 35 15 7 25 35 14 7 1.5 4.4

See also

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type