W3cubDocs

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

Initial value	`luminance`
Applies to	`<mask>` elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	per grammar

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 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 compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	24	?	35 35 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.	?	?	?
Applies to HTML elements	No	?	20	No	No	?

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	?	?	?	35 35 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.	?	?	?
Applies to HTML elements	?	?	?	20	?	?	No