CSS - mask-image Property

Quiz

CSS mask-image property is used to define an image or gradient that serves as the mask for an element. The mask determines which parts of the element are visible and which are hidden, based on the opacity or color values of the mask.

Syntax

mask-image: none | image | url | initial | inherit;

Property Values

Value	Description
none	No masking is applied to the element. Default.
image	The image to be used as the mask layer.
url	It specifies the URL to an image or a SVG <mask> element.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Mask Image Property

The following examples explain the mask-image property with different values.

Mask Image Property with None Value

To not have any masking effect on an element, we use the none value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked-element {
         mask-image: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-image property
   </h2>
   <h4>
      mask-image: none
   </h4>
   <div class="masked-element">
      <img src="/https/www.tutorialspoint.com/css/images/scenery.jpg" 
      alt="img" height=200 width=300>
   </div>
</body>

</html>

Mask Image Property with Image

To use an image as the mask layer over another image, we specify the image's url to be used as the mask to the mask-image property. Depending on the shapes present in the masking-image, the portions of the underlying image will be displayed. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked-element {
         mask-image: url("/https/www.tutorialspoint.com/css/images/logo.png");
         mask-repeat: no-repeat;
         mask-position: 15%;
         mask-size: 55%
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-image property
   </h2>
   <h4>
      mask-image: url("logo")
   </h4>
   <div class="masked-element">
      <img src="/https/www.tutorialspoint.com/css/images/scenery.jpg" 
      alt="img" height=300 width=470>
   </div>
   <h4>
      image-used:
   </h4>
      <img src="/https/www.tutorialspoint.com/css/images/scenery.jpg" 
      alt="img" height=150 width=250>
</body>

</html>

Mask Image Property with SVG Value

To use custom shapes as the mask layer over the other image, we can use the SVG. We can create a mask with an "id" with custom dimensions and use the "id" in the image on which the mask is to be applied. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
</head>

<body>
   <h2>
   CSS mask-image property
   </h2>
   <h4>
   SVG mask is used here.
   </h4>
   <svg width="500" height="300">
      <mask id="pentagon">
      <polygon fill="#ffffff" 
        points="300,80 470,200 410,290 190,290 130,200"></polygon>
      </mask>
      <image  width="500" height="300" 
        xlink:href="/https/www.tutorialspoint.com/css/images/scenery.jpg" mask="url(#pentagon)">
      </image>
   </svg>
   <h3>
      image used:
   </h3>
      <img src="/https/www.tutorialspoint.com/css/images/scenery.jpg" 
      alt="Cinque Terre" width="300" height="200">

</body>

</html>

Mask Image Property with Gradients

The gradients linear-gradient and radial-gradient can also be used as mask over the other image. These can be used for visual effects. These are used in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked1 {
         mask: linear-gradient(to left bottom, black, transparent);
      }

      .masked2 {
         mask: radial-gradient(ellipse, black 35%, rgba(0, 0, 0, 0.5) 60%);
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-image property
   </h2>
   <h4>
      mask-image: linear-gradient 
      (to right bottom, black, transparent)
   </h4>
   <div class="masked1">
      <img src="/https/www.tutorialspoint.com/css/images/scenery.jpg" 
      alt="flow" height=200 width=400>
   </div>
   <h4>
      mask-image: radial-gradient
      (ellipse, black 35%, rgba(0, 0, 0, 0.5) 60%)
   </h4>
   <div class="masked2">
      <img src="/https/www.tutorialspoint.com/css/images/scenery.jpg" 
      alt="flow" height=200 width=400>
   </div>
   <h4>
      image used:
   </h4>
      <img src="/https/www.tutorialspoint.com/css/images/scenery.jpg" 
      alt="flow" height=150 width=200>
</body>

</html>

Supported Browsers

Property
mask-image	120	120	53	15.4	15

css_reference.htm

Print Page