CSS mask-mode Property

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

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .img-mask {
        -webkit-mask-image: url('https://webtutor.dev/images/logo.png');
        mask-image: url('https://webtutor.dev/images/logo.png');
        -webkit-mask-size: 50%;
        mask-size: 50%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
    .luminance{
        mask-mode: luminance;
    }
    .alpha{
        mask-mode: alpha;
    }
</style>
</head>
<body>

<h2>mask-mode: luminance</h2>
<div class="img-mask luminance">
    <img src="https://webtutor.dev/images/women.jpg" alt="women" width="600" height="150">
</div>

<h2>mask-mode: alpha</h2>
<div class="img-mask alpha">
    <img src="https://webtutor.dev/images/women.jpg" alt="women" width="600" height="150">
</div>

</body>
</html>

Preview

Property Values

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

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
mask-mode	Not supported	53.0	Not supported	Not supported	Not supported

mask-image

mask-origin

CSS mask-mode Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us