mask-mode

The mask-mode property designates whether the mask layer image is treated as an alpha mask or a luminance mask.

Syntax

Example:

div.ex { 
  mask-image: url(path-to-image.jpg); 
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 80%; 
  mask-mode: luminance; 
}

Values

match-source
Default value. Dependent on what type of element (image or SVG) the mask-image property is. If it is an image URL or a gradient, the mask-mode is set to alpha. If it is an SVG <mask> element, it uses the <mask> element’s mask-type property.

luminance
Uses the luminance values of the mask image as the mask values.

alpha
Uses the alpha values of the mask image as the mask values.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of mask-mode? Submit a codepen.io demo and we'll showcase it here ↴