A Complete Guide To CSS Masking

Since the inception of the web, web design has been a huge part of it. Web designers use different approaches to design web pages, but this comes with some limitations, as only some designs can be implemented on the web, especially when working with media files, image assets, or SVG files.

Things can get complex and, most times, difficult to do. For example, before the introduction of CSS masking, designers used raster graphic editing software like Photoshop to add CSS masking to images before importing them to the web.

This approach can be a herculean task, especially when working with larger or multiple images.

One can not apply CSS masking to 50 or more images before importing them for use on the web. Doing so will lead to a slow and tedious development process, not to mention. There are cases of accessibility, browser compatibility, and color contrast, just to mention a few.

To fix this problem, the CSS masking property has been added to the CSS specification. This enables the smoothness and ease of applying masks to images on the web.

In this blog, we will explore what is CSS masking and how to apply CSS masking to blend images, videos, text, SVGs (Scalable Vector Graphics). We will also look at CSS masking properties and sub-properties, CSS mask border properties, browser compatibility, and other CSS masking properties and their use cases.

Let’s get started!

What is CSS Masking

CSS masking involves partially or fully hiding parts of a visual element, such as images, videos, or SVGs. Applying CSS masking involves using another graphical element, such as images, SVGs, or text, as an alpha or luminance mask.

When using an alpha mask, the object receiving the mask conforms to the shape of the object that is applying the mask. The shape becomes visible while other parts of the element become partially or fully hidden.

Let’s look at an example:

From the illustration above, we have two images, one with a jpg and the other with a png file extension. The png image supports transparency, which is best for CSS masking.

To make the CSS masking technique work, the mask.png is used as a mask to cover the image.jpg file revealing only the portion of the mask image shape.

Look at the below image for a clear vision:

Contrary to what you would think, CSS masking doesn’t crop out the image; instead, it hides part of the surrounding area of the object leaving only the mask area. This enables us to style the mask using the mask properties.

Real-Life Examples of Websites using CSS Masking

CSS masking has many benefits. It allows web designers and developers to hide parts of an element on the web. This can be either through text, PNG image shapes, or SVG elements. However, masking in CSS is not limited to hiding parts of an element. It can also be used to apply transparency to web elements, making the element blend well with the web page’s background.

Let’s look at real-world examples of where CSS masking has been used on popular websites.

Making Content Text

Here is a simple example of how LambdaTest used CSS masking to hide some parts of the content from the user with an option to reveal upon click (the Read More button). This limited the amount of content exposed to the user when browsing the website.

This technique can be very helpful as it allows users to scroll through multiple options before deciding on the actual top to read.

However, it can also be used to restrict who gets access to particular content, such as exclusive content for subscribers.

Here is a perfect example from the Atlantic.

Here, some parts of the web page are faded for subscribers only. This gives web authors control over who reads the content they publish on their website.

Linear Gradient Fading

While making content is great and has benefits, Images can also be blended with the page’s background.

This technique is handy, especially with landing pages. The MasterClass is a perfect example of how making images with linear gradients can improve user experience.

As you can see from their website, the CTAs buttons and display text have good color contracts from the background image and the web page’s background.

CSS is masking an image with a linear gradient that works simply. The black in the alpha channel is used to hide some parts of the image. The size or direction of the mask can be specified in the degree to determine how large the mask should grow to cover the selected image.

Browser Compatibility

The browser compatibility for CSS masking is not fully supported in all browsers at the time of writing.

Browsers such as Chrome, Opera, and Edge have partial support and require the use of the -webkit- prefix for the property to function correctly. However, Safari and Firefox fully support specifying the property without vendor prefixes.

Source

CSS Masking Properties

The CSS masking properties are required when you want to add additional styling to a masking effect. For example, we can create a mask with the mask-image property and reposition it with the mask-position property.

The above image illustrates how to use the mask property in CSS masking.

mask-image property

The mask-image CSS masking property enables objects that support transparency to be used as a mask for another object or element.

The mask-image CSS masking property uses the url() CSS function to set the URL of the object to be used as a mask. However, in the absence of an image or SVG file, a gradient mask can be applied to the object

Syntax:

Applying a gradient to mask-image

Here, we used the mask-image CSS masking property to apply a gradient mask to a specific element on the web page.

HTML:

CSS:

See the Pen
[1]mask-image by Ocxigin (@ocxigin)
on CodePen.

Chrome Preview:

From the Chrome browser preview, the mask-image: linear-gradient(#000, transparent)
only works on the second image and not the first one; this is because we set only one property on the normal-container element and the -webkit- prefix is omitted.

Firefox Preview:

From the Firefox browser preview, the mask-image: linear-gradient(#000, transparent) works on both images because a browser prefix is unnecessary for the mask-image to function correctly.

The above browser output is run on Firefox with LambdaTest Real Time Testing. LambdaTest is a digital experience testing platform that allows you to check your CSS framework-based web projects across desktop and mobile environments. It lets you perform manual and automated testing on an online browser farm of 3000+ real browsers, devices, and operating systems combinations.

To get the best result when working with the mask-composite property, try using Firefox instead of Chrome due to browser compatibility issues.

Subscribe to LambdaTest YouTube Channel and get detailed tutorials around Selenium automation testing, Cypress testing, and more.

Applying gradient direction to mask-image

We’ve seen how to apply gradients; the next thing to do is use the direction to linear gradients in mask-image.

HTML:

CSS:

Output:

See the Pen
[2] mask image by Ocxigin (@ocxigin)
on CodePen.

Preview:

Here, we applied a linear gradient to four different directions on four separate elements on the web page.

Applying gradient angle in the degree to mask-image

We can also specify the direction of the mask-image gradient in degrees. This will enable the angle to move in different directions.

HTML:

CSS:

Output:

See the Pen
[3]mask image by Ocxigin (@ocxigin)
on CodePen.

Preview:

Here, we specify the mask-image gradient to an angle of 90 deg and 180 deg, respectively.

Applying image to mask-image

Applying images to mask-image is very similar to the linear gradients we explained earlier. The CSS url() function is used to apply images as a mask-image.

HTML:

CSS:

Output:

See the Pen
[4] SVG Mask Image by Ocxigin (@ocxigin)
on CodePen.

Preview:

The mask-image property behaves like the background property, so when you apply a single image, it repeats itself to fill the containing element, as shown above.

To fix this, the mask-repeat is set to no-repeat.

mask-repeat property

The mask-repeat CSS masking property determines the direction in which the mask image should repeat. This could be either vertical or horizontal. It also determines the space between the repeated mask image.

The mask-repeat can be set to no-repeat to stop the mask image from repeating. Like the background-repeat property, the mask-repeat is set by default to repeat.

Syntax:

Values:

• repeat: sets the mask-image to repeat and fill the entire container (tile)
• no-repeat: stop the mask-image from repeating
• space: sets the distance between the mask-image
• round: sets the mask-image to stretch to fit the available space within the container
• repeat-y: sets the mask-image to repeat in the y-axis (vertical)
• repeat-x: sets the mask-image to repeat in the x-axis (horizontal)

HTML:

CSS:

Output:

See the Pen
[5]mask-image repeat by Ocxigin (@ocxigin)
on CodePen.

Preview:

Here, the no-repeat values set the mask-image to stop repeating and display just one image.

mask-size property

The mask-size CSS masking property determines the size of the mask-image. The keyword values can be used to determine a specific size ratio or multiple length values can be specified in one declaration.

Syntax:

HTML:

CSS:

Output:

See the Pen
[6]mask size by Ocxigin (@ocxigin)
on CodePen.

Preview:

From the browser preview, the mask size is increased from its initial size to 17em.

mask-position property

The mask-position CSS masking property determines the position of the mask-image within the container of the mask object. The mask position value is mostly specified by targeting the horizontal and vertical axes in a single declaration.

The mask-position takes both length and keyword values.

Syntax:

HTML:

CSS:

Output:

See the Pen
[7] mask position by Ocxigin (@ocxigin)
on CodePen.

Preview:

From the browser preview, we position the mask-image by specifying center center values to target both the horizontal and vertical axes in one declaration.

mask-origin property

The mask-origin CSS masking property determines the origin of the mask-image. The origin, in this case, refers to the position of the element box model.

To understand how the element box model works, see the illustration below.

Using the mask-origin can be tricky and difficult at first to wrap your head around. Make sure you specify the mask-image on a block element with a closing tag. Set the background color, border, and text.

Syntax:

Values:

• content-box: set the mask-image position relative to the element content-box.
• padding-box: set the mask-image position relative to the element padding-box.
• border-box: set the mask-image position relative to the element border-box.
• margin-box: set the mask-image position relative to the element margin-box.

HTML:

CSS:

Output:

See the Pen
[8]mask origin by Ocxigin (@ocxigin)
on CodePen.

Preview:

Here, the black around the logo is the border, since the mask-origin is set to border-box, the mask-origin starts positioning from the border of the element.

The mask-composite CSS masking property combines two or more mask images into a single one. To combine two images into one, for example, the mask-composite based on the value provided can either add, subtract, intersect, or exclude the images into one.

The mask-composite CSS masking property can be beneficial when the two images being combined are shapes and must be merged to form a new shape.

For accessibility and to get the desired result, PNG or SVG shapes are recommended, and for browser compatibility, Chrome does not have good support for the mask-composite property, use Firefox instead.

Syntax:

Values:

• add: both images (png or svg shapes) are added together to form a single image.
• subtract: the second image is subtracted from the first to form a single image.
• intersect: both images (png or svg shapes) are intersected from the overlapping angle.
• exclude: non-overlapping angles of both images are combined.

HTML:

CSS:

Output:

See the Pen
[9] mask composite by Ocxigin (@ocxigin)
on CodePen.

Preview:

mask-clip property

The mask-clip CSS masking property is used to set the area to which the mask will be applied. Depending on the value assigned to the mask-clip property, the mask can be clipped to the margin-box, border-box, padding-box, or content-box.

However, fill-box, stroke-box, and view-box are also values that determine the area mask-clip applies to, but they are used when working with SVGs.

Syntax:

Values:

• margin-box: set the mask to start clipping from the margin of the box.
• border-box: set the mask to start clipping from the box’s border.
• padding-box: set the mask to start clipping from the padding of the box.
• content-box: set the mask to start clipping from the box’s content.
• no-clip: the mask is not clipped to the box.
• fill-box: set mask to clip to the object bounding box.
• fill-stroke: set mask to clip to the object stroke bounding box.
• view-box: use the SVG view-box as a reference for clipping to the object bounding box.

HTML:

CSS:

Output:

See the Pen
mask -clip by Ocxigin (@ocxigin)
on CodePen.

Preview:

From the browser preview, the mask-clip is clipped starting from the content of the box. However, to see how the mask-clip works, try experimenting with other values of the mask-clip CSS masking property.

mask-type property

The mask-type CSS masking property is used to determine the CSS masking type (mode) of the <mask> element. The mask-type is based on two values which are luminance and alpha.

The values (luminance and alpha) specified on the mask will determine how the mask element will render. However, the mask-mode property overrides the value set on the mask-type CSS masking property. For example, if the mast-type initial value is luminance, the mask-mode can be set to alpha to override it.

Syntax:

The mask-type property directly applies to the mask element and has two values namely luminance and alpha.

Source

alpha

The alpha refers to the transparent part of an image (PNG) which is called the alpha channel. The alpha channel is the fourth channel of an image that supports transparency. The other three are Red, Green, and Blue, respectively, and are mostly referred to as RGB. However, the alpha channel it’s called RGBA, the “A” being the alpha channel (transparency).

SourceImages that support or have alpha channels are PNG images (PSD, TGA, DDS, or TIFF also support alpha channels). Images such as JPG (jpeg) do not have an alpha channel, and as a result, transparency can not be applied to it.

An image’s alpha channel does not have color information aside from black and white. The black is used to completely hide content by masking it, while the white is used to show hidden mask content.

The degree of the alpha channel can be present as opacity, and it ranges from 0.0 to 1. Where 0 means complete transparency, and one (1) means opaque. The values can also be specified as 0.5, which means the object should be slightly translucent. This is very common when defining the box-shadow property.

The alpha channel is very useful when you want to mask out an image or apply transparency so that you can see through an element or image.

And in the case of CSS masking, when we use alpha, it’s to hide or show the specified mask element or image.

In the absence of alpha, luminance can be used.

luminance

The luminance value specifies that the luminance of the mask-image or element mask should be used instead of the transparent alpha value.

This value can be a solid black, white, or faded mask which is a computed value from the alpha channel and the image or element RGB value specified on the object.

HTML:

CSS:

It’s important to note that as at the time of writing, the support of mask property is not that great in Chrome and might not show on your browser due to browser compatibility issues. Try using Firefox instead.
Output:

See the Pen
alpha in mask-type by Ocxigin (@ocxigin)
on CodePen.

Preview:

Here, the alpha value specified in the CSS masking property is used to display the star object mask that is hidden with the black fill specified on the SVG polygon tag in the HTML file.

mask-mode

The mask-mode CSS masking property is used to override the value set on the mask-type property. For example, if the mast-type initial value is alpha, the mask-mode can be set to luminance to override it.

The mask-mode CSS masking property takes three values: luminance, alpha, and match-source.

Unlike the luminance and alpha value, which are very specific, the match-source, depending on the source of the object, is used as a mask. If SVG is used as a mask, the SVG luminance value should be used as a mask on the image layer. However, if <image> is used as a mask, the alpha value of the image should be used as a mask on the image layer.

From the previous example, we have an SVG as a mask, and we previously set it to alpha, and we set the polygon fill to black in the HTML file.

To see how the mask-mode and luminance work, change the fill in polygon to orange (you can use any color of your choice) and then set the mask-mode to luminance in the CSS file.

Your browser output should be like this.

From the browser preview, we have a slightly faded mask compared to the previous example.

Border Box Mask

Let us further discuss the properties of border box masks.

mask-border

The mask-border CSS masking property is used to set the border mask image on a specified element. The mask-border property is a shorthand property and has the following longhand properties.

• mask-border-source
• mask-border-slice
• mask-border-mode
• mask-border-width
• mask-border-outset
• mask-border-repeat

When in use, the mask-border CSS masking property masks the edges of the specified element’s border, then the image is split into nine sections or regions by the mask-border-slice property.

The mask-border-slice controls how the image is divided into regions depending on the values provided; it can also act like a background with the fill value. However, the other longhand properties are used to style the image that has been sliced.

Syntax:

Browser Compatibility

At the time of writing this blog, the mask-border shorthand and longhand property is not supported yet in major browsers and as a result requires the use of non-standard property on Chromium-based browsers for testing. These properties include:

• mask-box-image-source
• mask-box-image-repeat
• mask-box-image-width
• mask-box-image-outset
• mask-box-image-mode
• Mask-box-image-slice

The above non-standard properties can be used as a replacement for testing purposes when working with mask-border longhand properties.

Source The Firefox section is completely red, indicating NOT support in all Firefox versions. Chrome and other Chromium-based browsers support an outdated version of this property.

mask-border-source

The mask-border-source CSS masking property is a longhand property of the mask-border property. It is used to set the mask-border-image.

Syntax:

The non-standard property for mask-border-source is mask-box-image-source.

Here is a preview of the image we will be using:

It is a 52 x 49 dimension png image. Now type and run the code below.

HTML:

CSS:

Output:

See the Pen
mask-border-source by Ocxigin (@ocxigin)
on CodePen.

Preview:

Here, the image is rendered as a fill, you will learn how to split and repeat the image in the section below.

mask-border-repeat

The mask-border-repeat CSS masking property is a longhand property of the mask-border property. It is used to adjust the scale to fit the mask-border-image dimension.

The non-standard property for mask-border-repeat is mask-box-image-repeat. Like the first example, we will use it to test how the mask-border-repeat functions.

Syntax:

Values:

• stretch: stretched to fill the gap between the mask-border-image.
• repeat: adjust and scale the source image around the element’s border.
• round: adjust and round the source image around the element’s border.
• space: adjust and apply spaces between the source image and the element border.

Now type and run the code below to see how this works.

HTML:

CSS:

Output:

See the Pen
mask-border-repeat by Ocxigin (@ocxigin)
on CodePen.

Preview:

Here, we applied the repeat value, which repeats the source image around the element’s border.

mask-border-slice

The mask-border-slice CSS masking property is a longhand property of the mask-border property, it is used to slice the image parsed by the mask-border-source into nine pieces, and these pieces are grouped in four corners, four edges, and a middle region.

The image below illustrates how the regions are distributed by their distance and size. The red is used to specify this.

Source

How the regions are organized is explained below

• The 1,2,3, and 4 boxes (zones) are the corners of the source image. This forms the corners of the mask-border image.
• The 5,6,7 and 8 boxes (zones) are used to form the edges. They are mostly repeated or scaled.
• The 9 box is the center of the region and is mostly discarded except if specified by the fill property.

The mask-border-outset, mask-border-width, and mask-border-repeat are used to modify the final render of the slice zones.

Syntax:

The non-standard property for mask-border-slice is mask-box-image-slice. Just like the other examples, we are going to be using it to test how the mask-border-slice functions.

Try the code sample below

HTML:

CSS:

Output:

See the Pen
mask-box-image-slice by Ocxigin (@ocxigin)
on CodePen.

Preview:

Here, we remove the center region and slice the top and bottom by 12 and the left and right by 20% (percent).

mask-border-outset

The mask-border-outset CSS masking property is a longhand property of the mask-border property; it is used to set the distance between the border-box and the element mask-border.

The non-standard property for mask-border-outset is mask-box-image-outset. We are going to be using it to test how the mask-border-outset functions.

Syntax:

HTML:

CSS:

Output:

See the Pen
mask-box-image-outset by Ocxigin (@ocxigin)
on CodePen.

Preview:

Here, a length value of 1rem is set on the outset of the mask-border. The 1rem is applied on all four corners of the zones. If two values were provided, such as 1rem 12, they will be applied to the top-bottom and left-right, respectively. However, it follows the anticlockwise direction in CSS together with properties like margin and padding.

mask-border-width

The mask-border-outset CSS masking property is a longhand property of the mask-border property. It is used to determine the width of the element’s border-mask.

The non-standard CSS masking property for mask-border-width is mask-box-image-width. We are going to be using it to test how the mask-border-width functions.

Syntax:

HTML:

CSS:

Output:

See the Pen
mask-box-image-width by Ocxigin (@ocxigin)
on CodePen.

Preview:

Here, we reduce the width by 1rem top and bottom and 20% left and right.

mask-border-mode

The mask-border-mode CSS masking property is a longhand property of the mask-border property; it is used to set the blending mode of the element’s border-mask.

The non-standard property for mask-border-mode is mask-box-image-mode. We are going to be using it to test how the mask-border-mode functions.

Syntax:

HTML:

CSS:

Output:

See the Pen
mask-border-mode by Ocxigin (@ocxigin)
on CodePen.

Preview:

Here, the mask-border is set to a blend mode of luminance.

HTML SVG Mask Element

We have covered what CSS masking is and the CSS masking properties. We’ve also covered the border box mask, the mask-border and mask-border longhand properties, what they are, and how to use them.

In this section, we will learn how to use the HTML SVG < mask > element and how to create stunning effects using text and Custom SVGs (Scalable Vector Graphics).

Mask video with text

We will be creating a text that masks through a video, and the video plays in the background.

And by the end of this project, you should know how to work with the SVG < mask > element and use it in your project.

Let’s begin.

Here is what the complete project demo looks like.

Firstly, create an HTML file and type the code below.

HTML:

Next, create a CSS file and type the code below.

CSS:

Now, save your CSS file and open it on the browser, your browser preview should be just like this.

Output:

See the Pen
Masking Video With Text by Ocxigin (@ocxigin)
on CodePen.

Preview:

From the browser preview, the SVG < mask > is used to create an alpha mask to mask on the video and text. To mask the text show, we add a fill color of #fff (white).

As stated earlier, the white is for showing hidden mask content by a black mask.

Mask video with Custom SVG

Now that you have a better understanding of how to work with SVG < mask > tag. Let’s take our little project a bit further and more interesting by adding a custom SVG logo or shape.

Here is what the project demo looks like:

From the same project folder, create a new html file and give it any name of your choice.
I will call mine “shape.html”.

Next, type the HTML code in your text editor and open it in your browser.

HTML:

From the HTML code sample we have here, we are using the < mask > tag to mask the SVG logo and the video under it.

We also have a rect SVG shape that is masked together with the logo and shape.

Now let’s create our CSS file and type the code below.

CSS:

Output:

See the Pen
Masking Video With Shape by Ocxigin (@ocxigin)
on CodePen.

Preview:

To show the SVG logo, the < rect > shape is targeted and a fill of #fff (white is added) to display the logo.

Browser Compatibility

The SVG < mask > Element has great support in all major browsers, so using it will bring the best result.

Source

Adding CSS Transitions to CSS Masking Property

Adding CSS transitions to CSS masking property can help improve the look and feel of our website or application. It gives the user a sense of interactivity as they navigate the application, and it leads to good performance and optimization.

In this section, let’s implement the properties we have learned till now by building simple card components with CSS masking and transiting them.

Let’s begin.

HTML:

CSS:

Output:

See the Pen
Transition to masking by Ocxigin (@ocxigin)
on CodePen.

Preview:

From the browser preview, we added a linear gradient CSS masking to the hero image on the card components.

Adding CSS Animations to CSS Masking Property

CSS masking can be used to do many things, as you have seen from the previous section. One popular feature that is common among apps such as Instagram and TikTok is animating horizontal scroll text.

This feature is very useful for long text that the user is not meant to scroll or interact with, the text can simply be animated so that all the information reveals itself and then repeats.

Here is a similar example from TikTok for context.

This is the project demo of what we are going to create.

So let’s begin by creating an HTML file. Then type and run the code below

HTML:

CSS:

Output:

See the Pen
Animating Text by Ocxigin (@ocxigin)
on CodePen.

Preview:

From the browser preview, we have a simple plain text that animates to the left direction and then becomes hidden toward getting to the side mask bar.

Hide Text Content with CSS Masking

In this section, we will learn how to hide text content with CSS masking. This feature is very effective for hiding a section of the page for the purpose of displaying exclusive content for a certain audience or limiting the amount of content a user has to interact with at a given time.

First, let’s take a look at the final project demo.

Now create an HTML file and type and run the code below.

HTML:

CSS:

JavaScript:

The JavaScript code is added to enable the toggle function to the toggle mask button.

Output:

See the Pen
Land page Masking by Ocxigin (@ocxigin)
on CodePen.

Preview:

From the browser preview, CSS masking is applied to mask the content from displaying until a user clicks on the toggle mask button.

We added a media query breakpoint for a responsive design so that the website will be responsive on different viewports and screen sizes.

Here is a preview from various device screen sizes.

Desktop Preview:

Tablet Preview:

Mobile Preview:

The above output has been rendered on LT Browser 2.0 by the LambdaTest platform. It is a browser designed specifically for developers, offering a friendly environment for building, testing, and debugging mobile websites. It provides the capability to evaluate website performance across various mobile device viewports. Additionally, you have the flexibility to customize the viewport resolution for testing your websites and save these settings for future reference.

With LT Browser 2.0, you can effortlessly explore and assess your websites on various screen resolutions, including desktops, mobile devices, tablets, and laptops. To begin using it, please refer to our documentation on LT Browser 2.0.

Ensuring Accessibility with CSS Masking

While performance deals with how fast a website performs, accessibility, on the other hand, deals with a website where all its features and content can be accessed irrespective of the physical impairments of the user.

To ensure accessibility with CSS masking, proper use of Alpha Channel must be adhered to prevent CSS masking out content from visually impaired users. However, making good use of color contrast can be very helpful for color-blind users.

Lastly, adhering to performance and accessibility best practices can help improve site performance when using CSS masking.

Conclusion

With CSS masking, we can partially or fully hide parts of an element. This involves using graphical elements with an alpha channel, such as PNG images, SVGs, or Text.

When in use, the specified element takes the shape of the object mask or linear gradient mask as an alpha or luminance mask.

Cheers! You’ve now learned the ins and outs of CSS masking. Armed with this knowledge, you can create visually stunning web designs that leave a lasting impression on your users. So go ahead, unleash your creativity, and push the boundaries of what’s possible with CSS masking!