CSS mask-image Property

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 in CSS.

Syntax:

mask-image: none | <mask-source>

none: No mask layer is set and a transparent black layer is set.

Syntax:

mask-image: none

Example:

In this example, no mask is created.

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" 
              content="width=device-width,
                       initial-scale=1.0" />
        <title>Document</title>
    </head>
    <style>
        .container{
          background-color: green;
          background-repeat: no-repeat;
          width: 400px;
          height: 400px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .mask{
          background:black;
          width: 200px;
          height: 200px;
          -webkit-mask-image: none;
        }
        .mask h1{
          height: 400px;
          width: 400px;
        }
        wrap text h1
    </style>
    <body>
        <div class="container">
            <div class="mask"></div>
        </div>
    </body>
</html>

Output:

<mask-source>: Used to give the source of the image url.

Syntax:

mask-image: url();

Example :

The icon is a mask over background color which is black. It can be changed as required.

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0" />
        <title>Document</title>
    </head>
    <style>
        .container{
          background-color: green;
          background-repeat: no-repeat;
          width: 400px;
          height: 400px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .mask{
          background:black;
          width: 200px;
          height: 200px;
          -webkit-mask-image: url(
"https://image.flaticon.com/icons/svg/942/942195.svg");
        }
        .mask h1{
          height: 400px;
          width: 400px;
        }
        wrap text h1
    </style>
    <body>
        <div class="container">
            <div class="mask"></div>
        </div>
    </body>
</html>

Output:

Browsers supported:

Chrome 1
Edge 79
Firefox 53
Opera 15
Safari 15.4

Explore