CSS mask-type Property and SVG Masking Explained

The mask-type CSS property is used to define whether an SVG <mask> element is interpreted as a luminance mask or an alpha mask. This property gives developers precise control over how transparency and visibility are calculated when masking HTML elements or SVG shapes, eliminating inconsistencies between standard CSS masking behavior and SVG-native masking rules.

The Core Purpose of mask-type

In vector graphics and web design, masking hides or reveals portions of an element using another shape or image. However, the browser needs to know which visual property of the mask determines the transparency of the target content: its brightness (luminance) or its opacity (alpha channel).

The mask-type property solves this by explicitly declaring the calculation mode directly on the SVG <mask> element.

Available Values

The mask-type property accepts two main keyword values:

  1. luminance (Default for SVG) When set to luminance, the browser calculates the opacity of the mask based on the lightness values of the RGB colors used within the <mask>.
    • Pure White (#ffffff): Results in 100% opacity (the masked content is fully visible).
    • Pure Black (#000000): Results in 0% opacity (the masked content is completely hidden).
    • Intermediate Colors/Grays: Produce partial transparency based on their relative brightness (for instance, bright yellow provides more visibility than dark navy).
  2. alpha When set to alpha, the browser completely ignores the color and brightness of the mask’s contents. Instead, it relies solely on the alpha channel (the opacity or transparent areas) of the elements inside the <mask>.
    • Fully Opaque Pixel: Content is 100% visible, regardless of whether the mask shape is black, white, red, or blue.
    • Fully Transparent Pixel: Content is completely hidden.
    • Semi-Transparent Pixel: Content inherits the exact partial opacity level.

Syntax and Implementation

The mask-type property is applied directly to the SVG <mask> element in your CSS:

mask#my-svg-mask {
  mask-type: alpha;
}

Alternatively, it can be defined inline within SVG markup:

<svg>
  <mask id="my-svg-mask" style="mask-type: alpha;">
    <!-- Mask content here -->
  </mask>
</svg>

Why mask-type Matters