Skip to main content

mask-mode

The mask-mode CSS property sets whether the mask reference defined by {{cssxref("mask-image")}} is treated as a luminance or alpha mask.

Syntax

/* Keyword values */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/* Multiple values */
mask-mode: alpha, match-source;

/* Global values */
mask-mode: inherit;
mask-mode: initial;
mask-mode: revert;
mask-mode: revert-layer;
mask-mode: unset;

The mask-mode property is specified as one or more of the keyword values listed below, separated by commas.

Values

  • alpha

    • : This keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.
  • luminance

    • : This keyword indicates that the luminance values of the mask layer image should be used as the mask values.
  • match-source

    • : If the {{cssxref("mask-image")}} property is of type <mask-source>, the luminance values of the mask layer image should be used as the mask values.

      If it is of type {{cssxref("<image>")}}, the alpha values of the mask layer image should be used as the mask values.

Formal definition

Formal syntax

Examples

Using alpha mask mode

{{EmbedGHLiveSample("css-examples/masking/mask-mode.html", '100%', 760)}}

Specifications

Browser compatibility

See also