Using CSS mask-image for image effects

CSS clipping with clip-path makes parts of an element invisible. For effects where you want to keep parts of an image partially visible or apply a transparency effect, masking is the better tool. The CSS mask-image property lets you use an image, an SVG, or a gradient as a mask layer.

Browser support for CSS masking is Baseline Newly available. For broader coverage, include both the standard property and the prefixed -webkit-mask-image in your CSS.

Masking with an image file

mask-image behaves similarly to background-image: pass an image with a url() value. The mask image needs transparent or semi-transparent areas for the effect to show. Fully transparent areas hide the image beneath them, while semi-transparent areas reveal part of the underlying image.

In practice:

  • An unmasked image appears as-is.
  • Applying a mask with a white star on a transparent background crops the image to just show the star shape.
  • Using a gradient-transparent background with the same star fades the image around the star rather than cutting it off sharply.

Pair mask-image with mask-size to control dimensions, just as background-size does. Keywords like cover and contain work, along with any valid length or percentage values. mask-repeat also exists, making it possible to tile a small mask image as a repeating pattern.

Masking with SVG

Two approaches let you use SVG as a mask. One way is to define a <mask> element inside an SVG and reference its ID from mask-image:

.container img {
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

This technique lets you apply the mask to any HTML element, not just images. The other approach — embedding the image directly inside the SVG — is supported by older browsers that support only the -webkit prefixed version. The <mask>-element approach is Baseline Newly available. For masks specifically on images, the embed approach generally has the widest compatibility.

Masking with gradients

CSS gradients offer a convenient way to mask without creating separate image or SVG assets. A linear gradient mask is a practical way to keep the area beneath a caption from being too dark. Radial gradients work too; a circular gradient mask can, for instance, create a highlighted region behind text.

Multiple masks and patterns

Like background images, multiple mask sources can be stacked, which is especially useful for gradient-based patterns built from layered backgrounds.

Consider a checkerboard pattern built with CSS gradients. The background-image version looks like:

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

To convert such a pattern for use as a mask, replace the background-* properties with the matching mask properties, including the -webkit version:

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Gradient patterns applied as masks to images can produce a range of visual effects. Along with clipping, CSS masking gives you a way to style images and other elements without a graphics editor.