mask-type

The CSS mask-type properties defines if a mask is used as a luminance or an alpha mask.

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

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

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

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

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 Level 1 The definition of 'mask-type' in that specification.	Candidate Recommendation	Initial definition.

Browser compatibility

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

See also

• Other mask-related properties: mask