![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS mask-mode Property
![CSS mask-mode Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-mask-mode.webp)
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:
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.
<!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.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS mask-mode Property), please comment here. I will help you immediately.