PLAY CSS
jaen

Effects

mask-mode

mask-mode sets whether a mask image hides the element by its transparency or by its brightness. With luminance, white areas show the element and black areas hide it.

Syntax

<masking-mode>#

<masking-mode> = alpha | luminance | match-source

Preview

Presets
Drag the bottom-right corner to resize

Code

.box {
  background: linear-gradient(
    135deg,
    #88d1c7,
    #77a7d7,
    #eaac3a
  );
  mask-image: linear-gradient(to right, #ffffff, #000000);
  mask-mode: luminance;
}

Controls

mask-modeluminance
mask-mode

About

Three values

  • alpha: uses the image’s transparency. Opaque areas show the element and transparent areas hide it. Colors don’t matter.
  • luminance: uses the image’s brightness. White areas show the element, black areas hide it, and gray areas let it partly through. Transparent areas hide it, just like black.
  • match-source: the initial value. When mask-image points at an SVG <mask> element, it follows that element’s mask-type (brightness by default); for images and gradients it means alpha.

Using a black-and-white image as is

A black-and-white image without transparent areas is opaque everywhere, so with alpha it hides nothing. With luminance, its shades become the visibility. The preview here masks with a white-to-black gradient (linear-gradient(to right, #ffffff, #000000)), so with luminance the box fades out toward the right.

Watch out

  • Separate values with commas to set each mask-image layer.
  • Safari has a bug where an SVG <mask> element is read by transparency instead of brightness, so luminance doesn’t always work as expected there.
  • Available from Chrome and Edge 120 and Safari 15.4.

References

MDN Web Docsmask-modeSpecificationCSS Masking Module Level 1Can I usemask-mode

Comments

PLAY CSS