Adding a mask to an image using CSS
Masking Images with CSS
We can place a layer over an element, allowing us to partially or completely hide that element. The mask-image property is a CSS property that specifies a layer on an element. It can also be an image, but we must use the image’s address to add a mask to it.
In this article, we’ll look at how to use CSS properties to mask https://coder-cafe.com/wp-content/uploads/2025/09/images, as well as some more things we can do with the same property.
Adding a Mask to an Image
The mask-image property is what we’ll use to add a mask to the desired image or text. This property adds a layer that can partially or completely hide the image. To better understand it, let’s quickly review its syntax.
Grammar
mask-image: none, <image>, initial, inherit;
The mask-image property takes different values. The value none will not add a mask, but will set a transparent black layer over the image or text. The value <image> can add a mask derived from a linear gradient. The initial value will set the property’s value to the default, while the inherited value will inherit the mask property from the element’s nearest ancestor.
To better understand this property, we’ll look at an example so we can clearly see how the mask-image property’s values work.
Example
In this example, we’ll use the <make-source> value and add the address of an image so we can add a mask over the image.
Here, we create a class container and then move into the CSS, first changing the height and width. We then use the mask property and the image we want to print. Let’s see the output we will get 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/https://coder-cafe.com/wp-content/uploads/2025/09/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/https://coder-cafe.com/wp-content/uploads/2025/09/images/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png);
}
body {
background-color: white;
}
</style>
</head>
<body>
<div class="contain"></div>
</body>
</html>
This is the output we will get. You can see that after using the mask-image property, the image is now masked.
Now we’ll use a new property value in another example, so let’s move on to the next example.
Example
In this example, we’ll use the mask-image property and set its value to a linear gradient. Now, let’s take a look at the code to understand how this property works.
<!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/https://coder-cafe.com/wp-content/uploads/2025/09/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 code above, we first created a container and then changed its height and width in the CSS. Afterwards, we added the image we wanted to place over the mask and used the mask-image property, setting its value to the lining gradient. Here, we set the black value to 81% and the transparent value to 20%. Let’s take a quick look at the code above.
In the example above, 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 black value in the linear gradient to 100%, the image we have would be fully visible to the user. If we set the transparent value to 100%, the image would be completely hidden by the mask.
Example
In the following example, we’ve changed the property value to a radial gradient, meaning the mask will now be applied in a circular pattern. The rest of the code is similar. Let’s see what we’ll get by using the following 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/https://coder-cafe.com/wp-content/uploads/2025/09/images/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" width="600" height="400">
</div>
</body>
</html>
When you run the above program, you can see that the mask is circular because part of the image is transparent and the other part is dark.
Why We Use the -webkit Prefix
We use the -webkit prefix because most browsers have partial support for the masks we use today. We use the -webkit prefix with standard properties to ensure compatibility with all browsers.
Conclusion
Masks in CSS can partially or completely hide a property, depending on the value used for that property. Masks can be used like mask-clip, mask-image, mask-pattern, mask-origin, and more. The mask property can set a mask on an image or text, and we can even change the shape of the mask we want to apply. Masks can be applied to an image to make it more immersive or to hide parts of an image.