HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Masking

❮ Previous Next ❯

With CSS masking, you make a cover to hide some parts of an element. This cover can hide a little or a lot of the element.

The CSS mask-image Property

The CSS property called mask-image is used to tell the web browser which image to use as a mask.

The image for the mask layer can be in different formats like PNG, SVG, a CSS gradient, or an SVG element.

Use an Image as the Mask Layer

To use a PNG or SVG image as the mask layer, you can simply provide the image's URL inside the url() value.

The picture with a mask should have a see-through part. When it's black, it means it's completely see-through.

Here is the mask picture, which is in PNG format, that we will utilize:

Look at this picture from Cinque Terre, Italy:

Eiffle

Now, let's use the PNG image above as a mask to apply over the picture from Cinque Terre, Italy:

Example Explained

The mask-image property tells a web page which picture to use as a special layer that hides or shows parts of an element.

The "mask-repeat" property decides how many times a mask image will be shown. If it's set to "no-repeat," the mask image will be displayed only once.

Another Example

If we don't use the 'mask-repeat' property, the mask image will be duplicated across the entire image of Cinque Terre, Italy.

Use Gradients as the Mask Layer

You can use CSS linear and radial gradients as mask images too.

Linear Gradient Examples

In this code, we're using a special kind of gradient to hide part of our picture. This gradient starts at the top in black and fades out towards the bottom until it's completely see-through.

In this code, we create a special effect on an image using a linear gradient combined with text to make the image look unique.

The Cinque Terre is a beautiful coastal region in the northwest part of Italy, specifically within Liguria. It's situated in the western part of La Spezia Province and is made up of five charming villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a beautiful coastal region located in the northwest of Italy, specifically in Liguria. It can be found to the west of La Spezia Province and is made up of five charming villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a stretch of beautiful coastline in northwest Italy, specifically in the Liguria region. This area is located to the west of the La Spezia Province and is made up of five charming villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

Radial Gradient Examples

In this code, we create a circular gradient that acts like a mask for our image.

Example

Apply a different circular gradient as a mask layer, in the shape of an ellipse.

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Use SVG as the Mask Layer

You can use the SVG element inside an SVG picture to make special masking effects.

In this code, we utilize the SVG element to produce various mask layers for our image.

Sorry, your browser does not support inline SVG.
Sorry, your browser does not support inline SVG.
Sorry, your browser does not support inline SVG.

CSS Masking Properties

This table displays CSS masking properties.

Property Description
mask-image Describes an image that acts like a covering for something on a webpage.
mask-mode Decides if the image used as a mask layer should be seen as a brightness mask or an opacity mask.
mask-origin Indicates where the mask layer image should start (its position) within the mask area.
mask-position Specifies where a mask layer image begins within its designated mask area.
mask-repeat Describes how the mask layer image is duplicated.
mask-size Describes how big a mask layer image should be.
❮ Previous Next ❯