Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add a mask to an image using CSS ?

  • Last Updated : 24 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. 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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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(
        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(
        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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :