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
mask
property? - How to use the CSS
mask-image
property - Similarities to the
background
property - CSS
mask-image
vs.clip-path
mask-image
browser 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.
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.
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.