How to add a mask to an image using CSS ?
Last Updated :
25 May, 2023
The mask-image property in CSS is used to set the mask of an image or text. CSS masking is used to form a mask layer for a particular element. You can add a mask to an image using the mask-image property in CSS. In this article, you will get to know the different property values of mask-image property and its different uses.
Syntax:
mask-image: none | <make-source> | <image> | inherit | initial | unset
Property Value:
- none: No mask layer is set and a transparent black layer is set.
- <make-source>: Used to give the source of the image URL.
- <image>: Uses a linear gradient as a mask image.
- inherit: Inherit the mask property of the parent.
- initial: Applies the default setting of the property ie, match-source.
- unset: Discard the current mask property from the element.
Example 1: Using <make-source> property value.
Syntax:
mask-image: url();
HTML
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< title >Using make-source property value</ title >
< style >
body {
background-color: #fff;
}
.container {
width: 335px;
height: 334px;
background-image: url(
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-mask-box-image: url(STAR.svg);
mask: url(STAR.svg);
}
</ style >
</ head >
< body >
< div class = "container" ></ div >
</ body >
</ html >
|
Output:
Example 2: Using <image> property value.
Syntax:
mask-image: linear-gradient();
Note: If there is 100% black in the image mask, then the image will be completely visible, anything that’s 100% transparent will be completely hidden, and anything in-between(0-100) will partially mask the image.
HTML
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< title >Using image property</ title >
< style >
body {
background-color: #fff;
}
.container {
width: 135px;
height: 134px;
background-image: url(
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-mask-image: linear-gradient(
to top, transparent 20%, black 80%);
mask-image: linear-gradient(
to top, transparent 20%, black 80%);
}
</ style >
</ head >
< body >
< div class = "container" ></ div >
</ body >
</ html >
|
Output: In the above example, we are seeing that a semi-transparent image is hidden using the area. This glitch is caused by using the mask property
Browser Support:
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer
Share your thoughts in the comments
Please Login to comment...