Skip to content
Related Articles
Open in App
Not now

Related Articles

CSS mask-image Property

Improve Article
Save Article
  • Last Updated : 04 Jul, 2022
Improve Article
Save Article

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 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(
        }
        .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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!