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.
mask-image: none | <make-source> | <image> | inherit | initial | unset
- 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.
Example 2: Using <image> property value.
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.