1. css
  2. /properties
  3. /mask

mask

Definition

The CSS mask property applies a mask to an element's content, revealing only portions of the element that intersect with the mask. The mask can be an image, a gradient, or another element. The mask property can be used in conjunction with other CSS properties to create interesting effects, such as masking an image with a text element or creating a spotlight effect.

Examples

Using an image mask:

.masked-image {
  background-image: url('image.jpg');
  -webkit-mask-image: url('mask.png');
  mask-image: url('mask.png');
}

Using a gradient mask:

.masked-gradient {
  background-image: linear-gradient(to bottom, red, yellow);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black);
  mask-image: linear-gradient(to bottom, transparent, black);
}

Masking an image with text:

<div class="image-text-mask">
  <img src="image.jpg" alt="Image">
  <h1>Masked Text</h1>
</div>
.image-text-mask {
  position: relative;
}

.image-text-mask h1 {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: text;
  mask-image: text;
  color: white;
}

Values

ValueDescription
noneNo mask applied
<mask-reference>A reference to an SVG or HTML element used as the mask
<mask-source>A reference to an image or gradient used as the mask
url()A URL pointing to an image or SVG file used as the mask

Best Practices

  • Use masks sparingly and purposefully, as they can negatively impact performance if overused.
  • Test masks thoroughly in different browsers to ensure compatibility.
  • Use mask-mode to specify how the mask should be applied (e.g. alpha, luminance, match-source, etc.).
  • Consider using a fallback image or solid color background for better accessibility.
  • Use mask-position and mask-size to adjust the positioning and size of the mask, as needed.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes