CSS mask-type

The mask-type property in CSS is used to specify the type of mask image to be applied to an element. Masking is a way to hide or show certain parts of an element by using another element as a mask. The mask-type property allows you to control how the mask is applied to the element.

There are three possible values for the mask-type property:

alpha: The mask image is treated as an alpha mask, where the opacity determines which parts of the element are visible.
luminance: The mask image is treated as a luminance mask, where the brightness determines which parts of the element are visible.
auto: The browser automatically determines the type of mask to use based on the format of the mask image.

Let's see some examples of how the mask-type property works:

Result:


    .mask-example {
      width: 200px;
      height: 200px;
      background: url('mask-image.png');
      -webkit-mask-image: url('mask-image.png');
      mask-type: alpha;
    }

In this example, we have an element with the class mask-example that has a background image set as its background. We also use the -webkit-mask-image property to set the mask image. The mask-type property is set to alpha, which means that the mask image is treated as an alpha mask.

Result:


    .mask-example {
      width: 200px;
      height: 200px;
      background: url('mask-image.png');
      -webkit-mask-image: url('mask-image.png');
      mask-type: luminance;
    }

In this example, we have the same element with the class mask-example, but this time the mask-type property is set to luminance. This means that the mask image is treated as a luminance mask, where the brightness determines which parts of the element are visible.

Experiment with different mask images and mask-type values to see how they affect the appearance of the masked element.