”;
CSS mask is a shorthand property that masks and displays an image at a particular position to partially or completely hide an element.
This property is a shorthand for the following CSS properties:
Possible Values
-
none − This value removes the masking effect.
-
<mask-reference> − Sets the image source for the mask. Refer mask-image.
-
<masking-mode> − Determines whether an alpha or luminance mask should be applied to the mask reference specified by mask-image. Refer mask-mode.
-
<position> − Determines the initial position for each defined mask image relative to the mask position layer set by mask-origin. Refer mask-position.
-
<bg-size> − Defines the size of the mask image. Refer mask-size.
-
<repeat-style> − Determines how the mask image are repeated. Refer mask-repeat.
-
<geometry-box> − A single <geometry-box> value sets both mask-origin and mask-clip. If two values are present, the first sets the mask-origin and second mask-clip.
-
<geometry-box> | no-clip − Determines the area affected by the mask-image.
-
<compositing-operator> − This value specifies the compositing operation to be applied on the current mask layer. Refer mask-composite.
Applies to
All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Syntax
Keyword Values
mask: none;
Image Values
mask: url(shop.png); mask: url(book.svg#star)
Combined Values
mask: url(heart.png) luminance; mask: url(heart.png) 40px 20px; mask: url(heart.png) 10px 10px / 100px 50px; mask: url(heart.png) repeat-y; mask: url(heart.png) border-box; mask: url(masks.svg#star) exclude;
CSS mask – none Value
The following example demonstrates that the mask: none property removes applied masking effect from the element −
<html>
<head>
<style>
.mask-none {
width: 200px;
height: 200px;
background-image: url("images/pink-flower.jpg");
background-color: red;
-webkit-mask: url(images/heart.png);
-webkit-mask-size: 100% 100%;
}
</style>
</head>
<body>
<h2>Image with masking effect</h2>
<div class="mask-none"></div>
<h2>Image without masking effect</h2>
<div class="mask-none" style="mask:none"></div>
</body>
</html>
CSS mask – <mask-reference>
The following example demonstrates that the mask: URL() property sets the image source as a mask layer for the div element −
<html>
<head>
<style>
.mask-url {
width: 200px;
height: 200px;
background-image: url("images/pink-flower.jpg");
background-size: cover;
-webkit-mask: url(images/heart.png);
-webkit-mask-size: 100% 100%;
}
</style>
</head>
<body>
<div class="mask-url"></div>
</body>
</html>
CSS mask – <masking-mode>
The following example demonstrates that the -webkit-mask: linear-gradient(red 20%, pink 40%, green 60%, black 80%) luminance; property, creates a colorful gradient mask along with luminance value that affects the brightness of the image −
<html>
<head>
<style>
img {
display: block;
width: 200px;
height: 200px;
-webkit-mask: linear-gradient(red 20%, pink 40%, green 60%, black 80%) luminance;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
}
</style>
</head>
<body>
<img src="images/pink-flower.jpg" alt="pink-flower">
</body>
</html>
CSS mask – <position>
The following example demonstrates the mask image using the url(images/heart.png) value and the 40px 20px values to set the position of the mask −
<html>
<head>
<style>
.mask-container {
width: 200px;
height: 200px;
background-image: url("images/pink-flower.jpg");
background-size: cover;
-webkit-mask: url(images/heart.png) 40px 20px;
-webkit-mask-size: 100% 100%;
}
</style>
</head>
<body>
<div class="mask-container"></div>
</body>
</html>
CSS mask – <bg-size>
The following example demonstrates the mask image using the url(images/heart.png) value and 10px 10px values position the mask image, and 100px 50px sets the size of the mask −
<html>
<head>
<style>
.mask-container {
width: 200px;
height: 200px;
background-image: url("images/pink-flower.jpg");
background-size: cover;
-webkit-mask: url(images/heart.png) 10px 10px / 100px 50px;
-webkit-mask-size: 100% 100%;
}
</style>
</head>
<body>
<div class="mask-container"></div>
</body>
</html>
CSS mask – <repeat-style>
The following example demonstrates the mask image using the url(images/heart.png) value and repeat-y value indicates that the mask image should be repeated vertically −
<html>
<head>
<style>
.mask-container {
width: 200px;
height: 200px;
background-image: url("images/pink-flower.jpg");
background-size: cover;
-webkit-mask: url(images/heart.png) repeat-y;
-webkit-mask-size: 50px;
-webkit-mask-position: center;
}
</style>
</head>
<body>
<div class="mask-container"></div>
</body>
</html>
CSS mask – <geometry-box>
The following example demonstrates the mask image using the url(images/shop.png) value and border-box value indicates that mask image is positioned and sized relative to the element”s border-box including border and padding −
<html>
<head>
<style>
.container {
width: 250px;
height: 200px;
background-color: greenyellow;
padding: 10px;
}
.masking-image {
height: 120px;
border: 20px solid red;
padding: 10px;
background-color: violet;
-webkit-mask: url(''images/shop.png'') border-box;
-webkit-mask-size: cover;
-webkit-mask-repeat: no-repeat;
}
</style>
</head>
<body>
<p>The image has a violet background, and the red border around it. The areas outside the border will remain visible.</h3>
<div class="container"><div class="masking-image"></div></div>
</body>
</html>
CSS mask – <geometry-box> | no-clip
The following example demonstrates the mask image using the url(images/bookmark.png) value.
The content-box value indicates that mask image is positioned and sized relative to the element”s content-box and no-clip value prevents the mask image from being clipped to the element”s content box.
<html>
<head>
<style>
.box {
max-width: 300px;
border: 3px solid blue;
}
.mask-container {
background-color: gold;
display: block;
padding: 20px;
width: 220px;
height: 220px;
border: 20px solid red;
-webkit-mask: url(images/bookmark.png) content-box no-clip;
-webkit-mask-position: center center;
-webkit-mask-repeat: repeat;
-webkit-mask-size: 100px 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="mask-container">
<img src="images/pink-flower.jpg" alt="pink flower" width="100%">
</div>
</div>
</body>
</html>
CSS mask – Related Properties
Following is the list of CSS properties related to mask:
| property | value |
|---|---|
| mask-clip | Defines the area of an element that is affected by a mask. |
| mask-composite | Defines the area of an element that is affected by a mask. |
| mask-image | Display or hide specific areas of an element. |
| mask-position | Determines where a mask image is placed on an element. |
| mask-repeat | Repetition of an image along horizontal axis, vertical axis, both the axes, or not at all. |
| mask-size | Defines the size of the mask image. |
| mask-origin | Defines the origin of the mask image. |
| mask-mode | Defines whether the mask reference given by mask-image should be considered as a luminance or alpha mask. |
| mask-border | Creates a mask along the edge of an element”s border. |
| mask-border-mode | Specifies the blending mode used in mask border. |
| mask-border-outset | Specifies the distance by which an element”s mask border is set out from its border box. |
| mask-border-repeat | Sets how the edges of a source image are adjusted to fit the dimensions of an element”s mask border. |
| mask-border-slice | Divides the image set by mask-border-source into regions. |
| mask-border-source | Sets the source image used to create an element”s mask border. |
| mask-border-width | Sets the width of an element”s mask border. |
”;