mask-type

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

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 valueluminance
Applies to<mask> elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderper 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 compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
mask-typeChrome Full support 24Edge No support NoFirefox 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 NoOpera Full support 15Safari Full support 6.1WebView Android Full support 37Chrome Android Full support 25Firefox 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 14Safari iOS Full support 7Samsung 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