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(
"https://media.geeksforgeeks.org/wp-content/uploads/20210820105343/gfg.png");
            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(
"https://media.geeksforgeeks.org/wp-content/uploads/20210820105343/gfg.png");
            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