Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Masking

10 minutes

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS Masking

CSS masking involves creating a mask layer that can be placed over an element to conceal either some or all parts of the element.

The CSS mask-image Property

The CSS mask-image property defines an image for the mask layer.

This image can be a PNG image, an SVG image, a CSS gradient, or an SVG <mask> element.

Browser Support

Please be aware that CSS masking is only partially supported by most browsers. In order to ensure compatibility, you may need to include the -webkit- prefix alongside the standard property for many browsers.

The version numbers provided in the table below indicate the earliest browser version that fully supports the property. Versions followed by -webkit- denote the initial release that functioned with a prefix.

Use an Image as the Mask Layer

To utilize a PNG or SVG image as the mask layer, employ a url() value to specify the mask layer image.

The mask image must include a transparent or semi-transparent region. Fully transparent areas are indicated by black. Below is the mask image (a PNG image) we’ll be using:

Presented below is an image captured in Cinque Terre, located in Italy.

Next, we implement the mask image (the PNG image mentioned earlier) as the mask layer for the image depicting Cinque Terre, Italy.

Example

Below is the source code:

.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

Example Explained

The mask-image property designates the image to serve as a mask layer for an element.

The mask-repeat property determines whether and how a mask image will repeat. When set to no-repeat, it signifies that the mask image won’t be repeated, appearing only once.

Another Example

When the mask-repeat property is left unspecified, the mask image will replicate across the entire image of Cinque Terre, Italy.

Example

Below is the provided source code:

.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
}

Use Gradients as the Mask Layer

Linear and radial gradients in CSS can also serve as mask images.

Linear Gradient Examples

In this instance, we utilize a linear gradient as the mask layer for our image. This linear gradient transitions from top (black) to bottom (transparent).

Example

Apply a linear gradient as the mask layer.

.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}

In this context, we employ a linear gradient in combination with text masking to serve as the mask layer for our image.

Example

Utilize a linear gradient combined with text masking as the mask layer.

.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}

Radial Gradient Examples

In this scenario, we employ a radial gradient, shaped like a circle, as the mask layer for our image.

Example

Utilize a radial gradient as the mask layer, forming a circle shape.

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

In this instance, a radial gradient, configured in the shape of an ellipse, is utilized as the mask layer for our image.

Example

Employ a different radial gradient as the mask layer, forming an ellipse shape.

.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

The SVG <mask> element is employed within an SVG graphic to generate masking effects.

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

Example

An SVG mask layer shaped like a triangle.

Example

An SVG mask layer configured in the shape of a star.

Example

An SVG mask layer shaped like circles.