The mask property
The mask property is a shorthand for all masking properties and allows setting:
mask image, its position, size, blending mode and other parameters.
It's a shorthand property for the following properties:
mask-image,
mask-position,
mask-size,
mask-repeat,
mask-origin,
mask-clip,
mask-mode,
mask-composite.
Syntax
selector {
mask: [mask-image] [mask-position] / [mask-size]
[mask-repeat] [mask-origin] [mask-clip]
[mask-mode] [mask-composite];
}
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 |
position |
Mask position (top, center, 50% 50%, etc.) |
size |
Mask size (cover, contain, 100px 50px) |
repeat |
Mask repetition (no-repeat, repeat-x, space) |
mode |
Blending mode (alpha, luminance, match-source) |
composite |
Mask composition (add, subtract, intersect, exclude) |
Preparing images
Let's say we have a nature image that we'll crop, and SVG images of a heart and arrow that we'll use for cutting:
<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">
:
Example . Image mask
Let's apply a heart-shaped mask to our image:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
background: red;
mask: url("heart.svg") center/300px no-repeat;
}
:
Example . Mask position
Heart mask in the top left corner:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left top/150px no-repeat;
}
:
Example . Mask position
Heart mask in the bottom right corner:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") right bottom/150px no-repeat;
}
:
Example . Mask position
Heart mask centered on the left:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center/150px no-repeat;
}
:
Example . Mask position
Heart mask centered:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/150px no-repeat;
}
:
Example . Mask position
Heart mask 100px from left and 200px from top:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") 100px 200px /150px no-repeat;
}
:
Example . Mask size cover
The cover value scales the mask to completely cover the element while maintaining proportions.
May crop the edges of the mask if proportions don't match:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/cover;
}
:
Example . Mask size contain
The contain value scales the mask to fit entirely within the element,
while maintaining proportions. May leave empty areas:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/contain no-repeat;
}
:
Example . Mask size
Fixed size sets exact mask dimensions.
For example, let's make a mask with size 50px:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/50px no-repeat;
}
:
Example . Repeat no-repeat
The no-repeat value disables mask repetition.
The mask is displayed only once at the specified position:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") top left / 150px no-repeat;
}
:
Example . Repeat repeat-x
The repeat-x value repeats the mask only along the horizontal axis:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center / 50px repeat-x;
}
:
Example . Composite add
The add value adds multiple masks (result is the union of all masks):
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 200px 30px / 150px no-repeat;
mask-composite: add;
}
:
Example . Composite intersect
The intersect value shows only the area where masks intersect:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 50px 30px / 150px no-repeat;
mask-composite: intersect;
}
:
Example . Composite exclude
The exclude value shows areas of masks that don't intersect:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 50px 30px / 150px no-repeat;
mask-composite: exclude;
}
:
Example . Composite subtract
The subtract value subtracts the second mask from the first.
For example, let's make one heart and subtract an
arrow from it:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 250px no-repeat,
url("arrow.svg") 170px 80px / 120px no-repeat;
mask-composite: subtract;
}
:
Example . Expanded mask notation
The mask property written with individual components:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-origin: content-box;
mask-clip: content-box;
mask-mode: alpha;
mask-composite: add;
}
:
Example . SVG for image
Using SVG element as a mask for 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;
background: red;
mask: url(#mask);
}
:
Example . SVG for gradient
Using SVG element as a mask for a gradient:
<div id="elem"></div>
<svg width="0" height="0">
<mask id="star-mask">
<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
</mask>
</svg>
#elem {
width: 500px;
height: 300px;
background: linear-gradient(45deg, red, blue);
mask: url(#star-mask);
}
:
See also
-
property
mask-position,
defines the position of the mask relative to the element -
property
mask-image,
sets the image for the mask -
property
mask-mode,
defines how the mask interacts with the background -
property
mask-size,
defines the size of the mask -
property
mask-repeat,
defines mask repetition -
property
mask-origin,
defines the mask positioning area -
property
mask-clip,
defines the mask clipping area -
property
mask-composite,
defines how multiple masks are combined
