Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS mask-image Property

  • Last Updated : 10 Aug, 2021

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
  • Edge
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!