CSS mask-mode property

Definition and Usage

mask-mode The property specifies whether the mask layer image should be treated as a luminance mask or an alpha mask.

Example

Make the mask layer image be treated as a luminance mask:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

Try It Yourself

CSS Syntax

mask-mode: match-source|luminance|alpha|initial|inherit;

Property Value

Value Description
match-source

If the mask-image property is an image (image URL or gradient), set the mask-mode to alpha.

If the mask-image property is an SVG <mask>, use the mask-type attribute of the <mask> element.

This is the default value.
luminance Uses the brightness value of the mask image as the mask value.
alpha Uses the alpha value of the mask image as the mask value.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: match-source
Inheritance: No
Animation Production: Not supported. See:Animation-related Properties.
Version: CSS Masking Module Level 1
JavaScript Syntax: object.style.maskMode="alpha"

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Related Pages

Tutorial:CSS Mask

Reference:CSS mask property

Reference:CSS mask-clip property

Reference:CSS mask-composite property

Reference:CSS mask-image property

Reference:CSS mask-origin property

Reference:CSS mask-position property

Reference:CSS mask-repeat property

Reference:CSS mask-size property

Reference:CSS mask-type property