Blend Modes in CSS3

 Blend Modes in CSS3

Blend Modes allow you to control how the colors of overlapping elements are combined. Blend Modes can be used to create a variety of creative effects, including adding texture, applying color overlays, and creating gradient effects.

html

<div class="box"></div>

<div class="overlay"></div>

css

.box {

  width: 100px;

  height: 100px;

  background-color: blue;

}

.overlay {

  width: 100px;

  height: 100px;

  background-color: red;

  mix-blend-mode: multiply;

}

In this example, we have created a blue box and a red overlay. We have used the mix-blend-mode property to specify the blending mode for the overlay. In this case, we have used the multiply blend mode to multiply the colors of the overlay with the colors of the box, creating a darker color effect.