CSS mask-composite

The mask-composite property in CSS is used to specify how mask images should be combined with each other and with the underlying content of an element. This property is typically used in conjunction with the mask-image property.

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


.mask {
  mask-image: url('mask.png');
  mask-composite: source-over;
}

Here, the mask-image property is used to specify the mask image to be applied, and the mask-composite property is used to specify how the mask image should be combined with the underlying content.

There are different values that can be used with the mask-composite property, such as source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, xor, and copy.

Let's see an example using the mask-composite property in action:

Result:

Content with Mask Image

In this example, we have a div element with the class content that has a light blue background color. We are applying a mask image to this element using the mask-image property and specifying the mask-composite property as source-over.

The mask image will be combined with the underlying content using the source-over rule, which means that the mask image will be painted over the content.

Try changing the value of the mask-composite property to see how it affects the mask image's interaction with the content.