Add a mask to an image using CSS
We can place a layer over an element to partially or completely hide it. The mask-image attribute is a CSS attribute used to specify the layer on the element. It can also be an image, but we need to use the address of the image to add a mask to the image.
In this article, we will take a look at how to add a mask to an image using CSS properties and what more we can do with the same properties.
Add a mask to the image
mask-image attribute is the attribute we will use to add a mask on the desired image or text. This property adds a layer that can partially or completely hide the image. To better understand this property, let's take a quick look at the property's syntax.
grammar
mask-image: none, <image>, initial, inherit;
mask-image property, the none value will not add a mask layer but will set a transparent black layer over the image or text.
To better understand this property, we will use an example to learn more about how the value of the mask-image property works.
Example
In this example, we will use the value of
Here, a container class is created and then go to the CSS part, in this part we first change the height and width and then use the mask attribute along with the image we want to print. Let's take a look at the output we 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/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 we are going to get, as you can see the image is now masked after using the mask-image attribute.
Now we will use the new property value in another example, so let's move to the next example.
Example
In this example, we will use the mask-image attribute and set its value to a linear gradient. Now, let’s move to the code to understand how this attribute 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/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 create a container and then change its height and width in the CSS section. After that, we added the image to which we want to apply the mask and set its value to a linear gradient using the mask-image property. We set the color black to 81% and transparent 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 that 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 will be fully visible to the user, if we set the transparency to 100%, the image will be obscured The hood is completely hidden.
Example
In the example below, we change the value of the property to a radial gradient, which means that the mask will now be added in a circular form, the other components of the code are similar. Let us see the output we will get using the code below.
<!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>
When executing the above procedure, you can see that the mask appears in a circular form because some parts of the image are transparent and other parts are dark.
Why do we use the -webkit prefix?
We use the -webkit prefix because most browsers have only partial support for the masking functionality we use today. We use both the -webkit prefix and standard attributes for compatibility with all browsers.
in conclusion
Masks in CSS can partially or completely hide properties, depending on the values used with the property. Masks can be used like mask clips, mask images, mask modes, mask origins, etc. The masking property can set a mask on an image or text, and we can even change the shape of the mask we intend to apply. Masks are applied to images to make the user more immersive or to hide certain parts of the image.
The above is the detailed content of Add a mask to an image using CSS. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
