CSS mask-mode Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 17 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The mask-mode property in CSS is used to define how the mask image is applied to an element. Masks can either hide or reveal portions of an element, and the mask-mode property determines whether the alpha channel or the luminance channel of the mask image is used to create the masking effect.

This property is particularly useful for creating complex visual effects by selectively displaying or hiding parts of an element based on the mask.

💡 Syntax

The syntax for the mask-mode property is as follows:

Syntax

Copied

element {
  mask-mode: mode;
}

Here, mode can be one of the specified keywords.

🎛️ Default Value

The default value of the mask-mode property is match-source, which means the mask mode will match the source image type.

🏠 Property Values

Value	Description
match-source	Uses the alpha channel of the mask image if it has one, otherwise uses the luminance values.
alpha	Interprets the mask image as an alpha mask, using the alpha channel to determine transparency.
luminance	Interprets the mask image as a luminance mask, using the lightness of the image to determine transparency.

📄 Example

In this example, we'll use a mask image and apply different mask-mode values to demonstrate their effects.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS mask-mode Example</title>
  <style>
    .mask-alpha {
      width: 300px;
      height: 200px;
      background: url('background.jpg');
      mask-image: url('mask-image.png');
      mask-mode: alpha;
    }
    .mask-luminance {
      width: 300px;
      height: 200px;
      background: url('background.jpg');
      mask-image: url('mask-image.png');
      mask-mode: luminance;
    }
  </style>
</head>
<body>
  <h1>Mask Mode Example</h1>
  <div class="mask-alpha">Alpha Mask</div>
  <div class="mask-luminance">Luminance Mask</div>
</body>
</html>

In this example, mask-alpha uses the alpha channel of mask-image.png to determine transparency, while mask-luminance uses the luminance values of the same image.

🖥️ Browser Compatibility

The mask-mode property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The mask-mode property is a versatile tool in CSS that allows you to control how mask images affect the visibility of elements on your web page.

By choosing between alpha and luminance masks, you can create a wide range of visual effects that enhance the overall design of your site. Experiment with different mask images and modes to see how this property can add depth and interest to your web projects.