CSS masking
CSS is all about presentation. Discover how CSS masking works to transform plain HTML into a premium user experience in the guide below.
The mask property in CSS is used to hide an element using the clipping or masking the image at specific points. Masking defines how to use an image or the graphical element as a luminance or alpha mask. It is a graphical operation that can fully or partially hide the portions of an element or object.
By utilizing masking techniques, one can display or conceal specific areas of an image with varying levels of transparency. Within CSS, this effect is accomplished through the utilization of the mask-image property, where an image is designated to serve as the mask.
Let's understand it using some illustrations.
Example
In this instance, we are overlaying a mask on the image element. In this scenario, we have two distinct images, and we are implementing masking on them. The resulting image is created by combining all the masked images, adjusting their size, and other modifications.
<!DOCTYPE html>
<html>
<head>
<style>
div img{
width: 200px;
height: 200px;
}
#masked{
width: 300px;
height: 300px;
-webkit-mask-box-image: url(box.png) 25;
}
</style>
</head>
<body>
<center>
<div id = "one">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> After masking </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "masked">
</center>
</body>
</html>
Output
There is a different scenario where we are applying images for the purpose of masking. We are employing a pair of images, with one of them serving as the mask image featuring stripes.
Example2
It is another instance of applying a mask to the image element.
<!DOCTYPE html>
<html>
<head>
<style>
div img{
width: 200px;
height: 200px;
}
#masked{
width: 300px;
height: 300px;
-webkit-mask-box-image: url(stripes.png);
background-color: black;
}
</style>
</head>
<body>
<center>
<div id = "one">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> After masking </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "masked">
</center>
</body>
</html>
Output
Example3
We have the option to utilize CSS gradients as the origin of the mask image.
<!DOCTYPE html>
<html>
<head>
<style>
#masked{
width: 300px;
height: 300px;
-webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.9)));
border: 9px ridge red;
}
</style>
</head>
<body>
<center>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "masked">
</center>
</body>
</html>
Output
Example4
<!DOCTYPE html>
<html>
<head>
<style>
#masked{
width: 300px;
height: 300px;
border-radius: 0px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, blue 40%, rgba(0,0,0,0.3) 70%);
border: 9px ridge red;
}
</style>
</head>
<body>
<center>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id = "masked">
</center>
</body>
</html>
Output
Example4
<!DOCTYPE html>
<html>
<head>
<style>
#circle{
width: 300px;
height: 300px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, blue 40%, rgba(0,0,0,0.3) 70%);
border: 9px ridge red;
}
#ellipse{
width: 300px;
height: 300px;
-webkit-mask-image: radial-gradient(ellipse 80% 30% at 50% 50%, blue 40%, rgba(0,0,0,0.3) 55%);
border: 9px ridge red;
}
</style>
</head>
<body>
<center>
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image" id = "circle">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image" id = "ellipse">
</center>
</body>
</html>
Output
