CSS Masking

CSS masking is a technique used to hide or reveal portions of an element by defining a mask image or gradient. It allows you to create complex visual effects by selectively showing or hiding parts of an element based on the content of another image or gradient.

There are two main types of CSS masking:

Alpha Masking

This type of masking involves using an image with varying levels of transparency (alpha channel) to determine which parts of the element are visible and which parts are hidden. The alpha channel of the mask image determines the opacity of corresponding pixels in the masked element.

Luminance Masking

Luminance masking involves using the brightness values (luminance) of an image to determine visibility. This type of masking is particularly useful when you want to reveal or hide parts of an element based on the brightness levels of another image or gradient.

CSS provides the following properties to implement masking:

mask-image: Specifies the mask image to be used for masking.
mask-mode: Specifies the blending mode used to combine the mask with the element's content.
mask-size: Specifies the size of the mask image.
mask-position: Specifies the position of the mask image relative to the element.
mask-repeat: Specifies how the mask image should be repeated if it's smaller than the element.

Example

.element {
  width: 300px;
  height: 200px;
  background-color: blue;
  mask-image: url('codeline.png');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
}

You can click on above box to edit the code and run again.

Output

Original Image