CSS mask-mode

The mask-mode property in CSS determines how an element's mask layers should be composited together.

There are four possible values for the mask-mode property:

alpha: The mask layers are composited based on the alpha values of the mask layers.
luminance: The mask layers are composited based on the luminance values of the mask layers.
alpha luminance: The mask layers are composited first based on the alpha values, and then based on the luminance values.
luminance alpha: The mask layers are composited first based on the luminance values, and then based on the alpha values.

Let's see some examples of how the mask-mode property works:

Result:


    .mask {
      mask-image: url('mask.png');
      mask-mode: alpha;
    }

This text is masked using alpha values.

Result:


    .mask {
      mask-image: url('mask.png');
      mask-mode: luminance;
    }

This text is masked using luminance values.

Result:


    .mask {
      mask-image: url('mask.png');
      mask-mode: alpha luminance;
    }

This text is masked first using alpha values and then using luminance values.

Result:


    .mask {
      mask-image: url('mask.png');
      mask-mode: luminance alpha;
    }

This text is masked first using luminance values and then using alpha values.