CSS Masking

The CSS mask-image Property

CSS masking allows you to create a mask layer to place over an element to partially or fully hide portions of the element.

The CSS mask-image property specifies a mask layer image.

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

Use a PNG Image as the Mask Layer

To use a PNG image as the mask layer, use a url() value to pass in the mask layer image.

The mask image needs to have a transparent or semi-transparent area. Black indicates fully transparent.

Here is the mask image ("w3logo.png") we will use:

<img src="w3logo.png" alt="EA Academy.com" style="width:260px;height:241px;">

Here is an image from Cinque Terre, in Italy:

<img src="img_5terre.jpg" alt="Cinque Terre" style="max-width:596px;width:100%;height:auto;">

Now, we apply the mask image as the mask layer for the image from Cinque Terre, Italy:

<img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" style="max-width:596px;width:100%;height:auto;">

Example

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

The mask-image property specifies the image to be used as a mask layer for an element.

The mask-repeat property specifies if or how a mask image will be repeated. The no-repeat value indicates that the mask image will not be repeated (the mask image will only be shown once).

Repeat the Mask Layer Image

If we omit the mask-repeat property, the mask image will be repeated all over the image from Cinque Terre, Italy:

<img class="mask1-2" src="img_5terre.jpg" alt="Cinque Terre" style="max-width:596px;width:100%;height:auto;">

Example

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

Position the Mask Layer Image

The mask-position property sets the starting position of a mask image (relative to the mask position area). By default, a mask image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Here, we position the mask image in center:

<img class="mask1-3" src="img_5terre.jpg" alt="Cinque Terre" style="max-width:596px;width:100%;height:auto;">

Example

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

CSS All Masking Properties

The following table lists all the CSS masking properties: