CSS - mask-mode Property

CSS mask-mode property specifies whether the mask reference given by mask-image should be considered as a luminance or alpha mask.

Syntax

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

Property Values

Value	Description
match-source	If the mask-image property is an image, use the alpha value, if the mask-image is an SVG <mask> element, use the <mask> element's mask type property. Default.
alpha	The transparency values (alpha channel) of the mask layer image are used as mask values.
luminance	The luminance values of the mask layer image are used as mask values.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Mask Mode Property

The following examples explain the mask-mode property with differetn values.

Mask Mode Property with Alpha Value

To apply masks based on the alpha (opacity) values of the mask image, we use the alpha value. The transparency of the mask determines the visibility of the masked element, where more opaque areas reveal the element and more transparent areas hide it. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         mask-image: url(/css/images/logo.png);
         mask-size: 70%; 
         mask-position: 25%;
         mask-repeat: no-repeat;
         mask-mode: alpha;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-mode property
   </h2>
   <h4>
      mask-mode: alpha
   </h4>
   <div class="mask-container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=470 height=130>
   </div>
   <h4>
      image used:
   </h4>
   <div>
      <img src="/css/images/scenery.jpg" 
      alt="img" width=200 height=150>
   </div>
   </div>

</body>

</html>

Mask Mode Property with Luminance Value

To apply masks based on the luminance (brightness) of the mask image, we use the luminance value. The brightness of the mask determines the visibility of the element, where brighter areas reveal the element and darker areas obscure it. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         mask-image: url(/css/images/logo.png);
         mask-size: 70%; 
         mask-position: 25%;
         mask-repeat: no-repeat;
         mask-mode: luminance;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-mode property
   </h2>
   <h4>
      mask-mode: luminance
   </h4>
   <div class="mask-container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=470 height=130>
   </div>
   <h4>
      image used:
   </h4>
   <div>
      <img src="/css/images/scenery.jpg" 
      alt="img" width=200 height=150>
   </div>
   </div>

</body>

</html>

Supported Browsers

Property
mask-mode	120	120	53	15.4	106

css_reference.htm