CSS mask-mode Property

Definition and Usage

The mask-mode property is set on the element being masked. It decides whether the mask-image is read as an alpha mask or a luminance mask.

It is not inherited. The initial value is match-source. You need a mask-image first — mask-mode alone does nothing.

CSS Syntax

Multiple comma-separated values map to multiple mask-image layers.

Property Values

How to Use mask-mode

Pick how the mask’s pixels should control visibility.

1. Set mask-image (gradient, PNG, or SVG).
2. Choose alpha for transparency-only masks (typical PNGs and fades).
3. Choose luminance when black/white brightness should drive the cutout.
4. Leave match-source when the source type should decide for you.

Live Preview

Same colored mask (black → green → white). Switch the mode and watch visibility change.

CSS Examples

Each snippet focuses on mask-mode. Use Try It Yourself for a live editor.

<style>
  div {
    width: 220px;
    height: 140px;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    mask-image: linear-gradient(to right, #000, #008000, #fff);
    mask-mode: alpha;
  }
</style>

<div></div>

<style>
  div {
    width: 220px;
    height: 140px;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    mask-image: linear-gradient(to right, #000, #008000, #fff);
    mask-mode: luminance;
  }
</style>

<div></div>

<style>
  div {
    width: 220px;
    height: 140px;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    mask-image: linear-gradient(to right, #000, #008000, #fff);
    mask-mode: match-source;
  }
</style>

<div></div>

Key Takeaways