CSS mask-mode Property

❮ Previous Complete CSS Reference Next ❯

Example

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

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

Try it Yourself »

Definition and Usage

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

Default value:	match-source
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.maskMode="alpha"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
mask-mode	Not supported	Not supported	53.0	Not supported	Not supported

CSS Syntax

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

Property Values

Value	Description
match-source	If the mask-image property is an image (an image URL or a gradient), set mask-mode to alpha. If the mask-image property is an SVG <mask> element, use the <mask> element's mask-type property. This is default.
luminance	Use the luminance values of the mask image as the mask values
alpha	Use the alpha values of the mask image as the mask values
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS reference: mask-image property

CSS reference: mask-origin property

CSS reference: mask-position property

CSS reference: mask-repeat property

CSS reference: mask-size property

CSS tutorial: CSS Masking