Adding a mask to an image using CSS

CSS Web Development Front End Technology

We can place a layer over an element so that we hide the element either partially or completely. The mask-image property is a CSS property which specifies layer on the element and it can also be an image but we would have to use the address of the image to add a mask on that image.

In this article, we will have a look at adding a mask to an image using CSS properties and what we can do more with the same property.

Adding mask to an image

The mask-image property is the property that we will be going to use in order to add a mask on a desired image or text. The property adds a layer to either hide the image partially or completely. For understanding the property better, let’s get a quick look at the syntax of the property.

Syntax

mask-image: none, <image>, initial, inherit;

The mask-image property uses different values, the none value will add no mask layer but a transparent black layer will be set on the image or the text. The <image> value can add a mask from the linear gradient. The initial value will set the value of the property to its default and the inherit value will inherit the mask property of the nearest parent of the element on which this property is used.

To understand the property better, we will be looking at an example so that we get a clear view on how the values of the mask-image property work.

Example

In the example, we will be using the <make-source> value and adding the address of the image so that we can add the mask on the image.

Here, created a class container and then went to the CSS section in which we first changed the height and the width after which we used the mask property along with the image that we want to print. Let’s look at the output that we will be getting from the code.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>An example of using the make-source property</title>
   <style>
      .contain { 
         width: 330px;
         height: 330px;
         background-image: url(
            "https://www.tutorialspoint.com/static/images/simply-easy-learning.jpg"
         );
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         background-position: center;
         -webkit-mask-box-image: url(https://www.tutorialspoint.com/images/logo.png);
      }
      body {
         background-color: white;
      }
   </style>
</head>
<body>
   <div class="contain"></div>
</body>
</html>

This is the output that we will be getting as you can see that the image is now masked after using the property mask-image.

Now we will be using a new property value in another example so let’s head over to the next example.

Example

In this example, we will be using the mask-image property and set its value to linear gradient and now, let’s head over to the code to understand how this property work.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of using mask-image property</title>
   <style>
      .container {
         height: 130px;
         width: 130px;
         background-image: url(
            "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg");
         background-position: center;
         background-size: cover;
         -webkit-mask-image: linear-gradient(
            to top, transparent 19%, black 81%);
            background-repeat: no-repeat;
            mask-image: linear-gradient(
            to top, transparent 19%, black 21%
         );
      }
      body {
         background-color: white;
      }
   </style>
</head>
<body>
   <div class="container"></div>
</body>
</html>

In the above code, we first created a container and then in the CSS section we changed its height and width. After that, we added the image that we want to put a mask on and used the mask-image property and set its value to liner gradient. Where we set the color black to 81% and transparent to 20%. Let’s have a quick look for the above code.

In the above example you can see that the image is transparent from the bottom which means the mask has been applied to the image.

Note − If we set the value of the black color in linear gradient to 100% the image that we are having will be completely visible to the user and if we set the transparent to 100% then image will be hidden completely by the mask.

Example

In the following example, we changed the value of the property to radial gradient which means the mask will now be added in a circular form, the other components of the code are similar. Let’s look at the output that we will be getting by using the below code.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Another example for the image-mask property</title>
   <style>
      .mask2 {
         mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
         -webkit-mask-image: radial-gradient(circle, black 49%, rgba(0, 0, 0, 0.5) 50%);
      }
   </style>
</head>
<body>
   <h1>This is an example of the mask-image property</h1>
   <h3>We are using the gradient value</h3>
   <div class="mask2">
      <img src="https://www.tutorialspoint.com/images/logo.png" width="600" height="400">
   </div>
</body>
</html>

On executing the above program, you can see that the mask is in circular form as some of the part of the image is transparent and the other is dark.

Why do we use -webkit prefix?

We use the -webkit prefix because most of the browsers are having partial support for the masking that we used today. We use the -webkit prefix along with the standard property so that it is compatible with all of the browsers.

Conclusion

The mask in CSS can either hide a property partially or fully depending upon the value which is used with the property. The mask can be used like mask-clip, mask-image, mask-mode, mask-origin and many more. The masking property can set a mask on an image or a text and we can even change the shape of the mask that we intend to apply. Masking will be applied on an image so as to make it more immersive to the user or to hide some part of an image.