The mask-mode property

The mask-mode property sets how the mask interacts with the element's background. It determines whether the mask will use the alpha channel (transparency) or luminance values (brightness) of the mask image.

Syntax

selector {
	mask-mode: alpha | luminance | match-source;
}

Values

Value	Description
`alpha`	The mask uses only the alpha channel (transparency) of the image.
`luminance`	The mask uses luminance values of the image (white = visible, black = transparent).
`match-source`	Uses alpha channel for images, luminance for SVG (default value).

Example . Alpha mode

Applying an SVG mask in alpha mode:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
	mask-mode: alpha;
}

Example . Luminance mode

Applying an SVG mask in luminance mode:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
	mask-mode: luminance;
}

Example . SVG mask with match-source mode

Using the default value (match-source) for SVG:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="svg-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	mask: url(#svg-mask);
	mask-mode: match-source;
}

Example . Composition with different modes

Combining masks with different blending modes:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat alpha,
		url("arrow.svg") 200px 30px / 150px no-repeat luminance;
	mask-composite: add;
}

The mask-mode property

Syntax

Values

Example . Alpha mode

Example . Luminance mode

Example . SVG mask with match-source mode

Example . Composition with different modes

See also