Masking is a photo editing technique used to edit parts of an image. You can isolate portions of an image and make changes without touching the other areas. Mask layering is the process of hiding parts of an image without deleting or erasing them.
In this post, you’re going to learn about the CSS mask-image property and how it can be used to set an image as a mask layer for a web element.
Jump ahead:
- What is the CSS
maskproperty? - How to use the CSS
mask-imageproperty - Similarities to the
backgroundproperty - CSS
mask-imagevs.clip-path mask-imagebrowser compatibility
What is the CSS mask property?
The mask property is a shorthand for several other properties. These include mask-clip, mask-size, mask-composite, mask-origin, mask-mode, mask-position, mask-repeat, and last but not least, mask-image. We’ll get to see how some of these work as we progress.
The mask-clip property sets the area that’s affected by the mask. Using mask-size is self-explanatory, and as you’d expect, you use this property to determine the size of the mask. The origin of mask-image can be set with mask-origin.
You can use the mask-mode property to set the transparency and luminance of the mask image. The other properties, mask-position and mask-repeat, are also self-explanatory.
How to use the CSS mask-image property
So, how do we use the CSS mask-image property? There are three ways you can use the CSS mask-image property: the mask can be an image, gradient, or SVG. You can also have multiple mask values or layers.
Image masks
You’ll need one image for the mask and another for the background. Ideally, the mask image should be a transparent or semi-transparent PNG.
Here are two images for this demo:
First, set up a simple container:
<body>
<div class="container">
<img src="images/7.jpg" class="mask" alt="">
</div>
</body>
Now, you can add the mask-image property in CSS:
.container img{
mask-image: url(images/logrocket.png);
-webkit-mask-image:url(images/logrocket.png);
mask-size: 100%;
}
You’ll get the following result:
This CodePen demo contains the complete CSS syntax used to create this image mask:
See the Pen
Image Mask by Oscar-Jite (@oscar-jite)
on CodePen.
When the mask-size property is set to 100% it makes the image cover the entire mask image. Without it, for this particular example, here’s a screenshot of what you would get:
However, here’s what you get when it’s set to 50%:
You can also get more interesting effects by changing the mask properties. It doesn’t stop there. You can take it a step further, using a different shape for the mask-image:
To keep it from repeating, like in the screenshot, use the mask-repeat property. We can also throw in the mask-position property to align it to the center:
.container img{
mask-image: url(images/heart.png);
mask-size: 90%;
mask-repeat: no-repeat;
mask-position: center;
}
It’s looking much better! So, that’s how you create image masks using the CSS mask-image property.
Gradient masks
CSS gradients can be used to mask an image and can be a linear-gradient or radial-gradient. We’re still using the same image as the previous example, but we’ll replace the URL of the mask-image property. One part of the gradient will be set to transparent.
Let’s start off with a linear-gradient:
.container img{
mask-image: mask-image: linear-gradient(to top, transparent, #000);
-webkit-mask-image: linear-gradient(to top, transparent, #000);;
}
The code above will give you the following result:
Now, let’s try it with a radial-gradient:
.container img{
mask-image: radial-gradient(circle, transparent 30%, #000);
-webkit-mask-image: radial-gradient(circle, transparent 30%, #000);
}
You can swap the position of the colors to switch things up with the code below:
.container img{
mask-image: radial-gradient(circle,#000, transparent 50%);
-webkit-mask-image: radial-gradient(circle, #000, transparent 50%);
}
There are so many things you can do with CSS gradients to produce various effects. You can try adding more color stops, choosing a start point, or even using repeating gradients.
SVG masks
SVGs, or scalable vector graphics, are an XML vector-based image format. You can create the mask-image by converting an image into an SVG, or you can create your own SVG shape.
To create an SVG mask, you’ll first need to create the shape using the SVG HTML element. Within the SVG, you’ll have a mask element with an ID:
<svg width="0" height="0" viewBox="0 0 400 400">
<mask id="mask">
<circle fill="#fff" cx="250" cy="250" r="200"/>
</mask>
</svg>
This mask ID is what you’ll use as the reference for the mask-image:
.container img{
mask-image: url(#mask);
-webkit-mask-image: url(#mask);
}
You’ll get the following result:
A rather dull circle.
The SVGs have to be black and white. When the mask-image is applied, all the black will become transparent, and the white parts will be filled in. If you add any other color, the mask becomes translucent with a tint of that color.
With this new information, we can now spice up our circle. Let’s add a smaller circle with a fill color set to black, which makes the mask a ring. You can also add a stroke around the bigger circle:
<svg width="0" height="0" viewBox="0 0 400 400">
<mask id="mask">
<circle fill="#fff" cx="250" cy="250" r="200"
stroke="#553c9a" stroke-width="40px"/>
<circle fill="#000" cx="250" cy="250" r="100" />
</mask>
</svg>
Here’s the result, an SVG mask as a ring with a translucent border around it:
See the Pen
SVG mask-image by Oscar-Jite (@oscar-jite)
on CodePen.
See the Pen
SVG mask-image by Oscar-Jite (@oscar-jite)
on CodePen.
You can also change the position of the SVGs or combine different shapes:
You’ve now learned how to use the mask-image property to mask images in three different ways. Try out different shapes and see what you can come up with. You could use the mask-image property to create really cool backgrounds for webpages.
To learn how to animate SVGs with CSS, check out this tutorial.
Similarities with the background property
The mask and background properties share some similarities. They are both shorthand properties for a number of variations. If you know how to work with background properties, you shouldn’t have any problem with mask because they use the same values.
CSS mask-image vs. clip-path
On the surface, it seems that mask-image and clip-path produce the same effect. However, the clip-path property creates a clipping region, or a path, around an element. So, the major difference is that mask-image is an image while clip-path is a path.
With clip-path, you are limited in the shapes you can use. You can only work with basic shapes and polygons. CSS mask-image allows you to work with more complex shapes.
Learn more →Even outside of web development, image masking and clip parts are used to isolate regions of an image, but image masks create smoother edges.
mask-image browser compatibility
The mask-image property requires the -webkit- vendor preface to work on Chrome, Microsoft Edge, Opera, and Safari v4-15.3. It’s not supported on Edge v12-15, Safari v3.1-3.2, Firefox v2-52, and Opera v10-12.1.
You can find a more detailed analysis here.
Conclusion
The CSS mask-image property hides part of an image and lets you set an image as the mask layer for an element. You can use this property with images, gradients, and SVGs. Transparent PNGs are the format of choice when using image masks.
For gradient masks, the property transitions from a color to transparent and can be linear or radial. Remember, the SVGs must be black and white because the white parts of the mask will be visible, and the black will be blank.
Go ahead, flex your creative muscles, and see what interesting effects you can produce.
Is your frontend hogging your users' CPU?
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
https://logrocket.com/signup/LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — Start monitoring for free.
