The mask-image property

The mask-image property allows you to specify an image that will be used as a mask for an element. The mask determines which parts of the element will be visible and which will be hidden. You can use SVG, PNG images, or gradients as masks.

Syntax

selector {
	mask-image: none | <image> | <url>;
}

Values

Value	Description
`none`	Disables masking (default value).
`url()`	Path to mask image (SVG, PNG).
`linear-gradient()`	Linear gradient as a mask.
`radial-gradient()`	Radial gradient as a mask.

Example . Using SVG as a mask

Let's apply an SVG heart image as a mask to a picture:

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

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 300px;
	mask-repeat: no-repeat;
}

Example . Using gradient as a mask

Let's apply a linear gradient as a mask to an element:

<div id="elem"></div>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask-image: linear-gradient(to right, transparent, black);
}

Example . Using SVG element as a mask

Let's create a mask using an SVG element and apply it to an image:

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

#image {
	width: 500px;
	height: 281px;
	mask-image: url(#mask);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}