How to add a mask to an image using CSS ?
The mask-image property in CSS is used to set the mask of an image or a text. It 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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
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:
