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

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