Learn CSS: How to Apply mask-image Property

CSS Masking tells the browser which resource items should be visible, and it’s great for creating unique shapes and layouts. Masking can be accomplished in three ways: using PNG format with transparency parts, CSS gradients, or SVG components.

You could set the image as a background-image or any image in your html and add the mask as a mask-image on the same element, and get something like this:

The mask is applied to the background image.

Masking with a Gradient:

Using a CSS gradient as your image mask is an easy way to achieve a masked field without having to create an image or SVG.

A simple linear gradient used as a filter, for example, could ensure that the bottom portion of an image is not too dark for adding image caption.

Masks are similar to backgrounds in that they can be sized, positioned, and repeated in the same way that backgrounds can. See the properties mentioned below for more details. Yet masks have another curious feature in common with backgrounds: which is gradients.

Browser Support:

However, when using these properties, don’t forget about cross-browser support, and add vendor prefixes.

Chrome 93, Firefox 53, IE No support, Edge 90, Safari TP

Author Images
From Islamabad

A software developer with a keen interest in writing about technology, finance, and entrepreneurship. I've written for businesses in a variety of fields, including new technology, healthcare, programming, consumer applications, corporate computing, UI/UX, outsourcing, and education.

Post a comment

Your email address will not be published. Required fields are marked *

    Press x to close