CSS Masks

With CSS masks, you can create a mask layer and place it on an element to partially or completely hide some parts of the element.

mask-image property

CSS mask-image attribute specifies the mask layer image.

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

Browser support

The numbers in the table below indicate the first browser version that fully supports the property.

with -webkit- The prefix number indicates the first version that supports the prefix.

Use image as mask layer

To use PNG or SVG images as a mask layer, please use url() Value passes the mask layer image.

The mask image must have a transparent or semi-transparent area. Black represents complete transparency.

This is the mask image (PNG image) we will use:

This is the image from the Italian Cinque Terre:

Now, we will apply the mask image (the PNG image above) as a mask layer for the Italian Cinque Terre image:

Example

The following is the source code:

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

Try It Yourself

Example explanation

mask-image attribute specifies the image used as the element mask layer.

mask-repeat attribute specifies whether the mask image is repeated or how it is repeated. The 'no-repeat' value indicates that the mask image will not be repeated (the mask image will only be displayed once).

another instance

If we omit mask-repeat The attribute, when masked image will be repeated throughout the Wuyancun image:

Example

The following is the source code:

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

Try It Yourself

Use gradient as mask layer

CSS linear and radial gradients can also be used as mask images.

Linear gradient example

Here, we use linear gradient as the image mask layer. This linear gradient goes from top (black) to bottom (transparent):

Example

Use linear gradient as mask layer:

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

Try It Yourself

Here, we use linear gradient and text mask as the image mask layer:

Example

Use linear gradient and text mask as mask layer:

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

Try It Yourself

Radial gradient example

Here, we use radial gradient (shape as circle) as the image mask layer:

Example

Use radial gradient as mask layer (circular):

.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%);
}

Try It Yourself

Here, we use a radial gradient (in the shape of an ellipse) as the mask layer for the image:

Example

Use another radial gradient as a mask layer (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%);
}

Try It Yourself

Using SVG as a mask layer

The SVG <mask> element can be used within SVG graphics to create mask effects.

Here, we use the SVG <mask> element to create different mask layers for the image:

Example

A triangular SVG mask layer:

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Try It Yourself

Example

A star-shaped SVG mask layer:

<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Try It Yourself

Example

A circular SVG mask layer:

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Try It Yourself