Skip to content
Related Articles

Related Articles

CSS mask-image Property
  • Last Updated : 24 Jul, 2020
GeeksforGeeks - Summer Carnival Banner

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>

    Property values:

  • none: No maks layer is set and transparent black layer is set.

    Syntax:

    mask-image: none

    Example:



    In this example, no mask is created.




    <!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.




    <!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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :