What is CSS Blend Mode

<GradientFilters>

The blend mode determines how two or more elements interact with each other when they overlap. For example,

<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;

  mix-blend-mode: screen;
}

.red {
  background-color: rgba(255, 0, 0, 1);
}

.blue {
  background-color: rgba(0, 0, 255, 1);
  left: 50px;
}

.green {
  background-color: rgba(0, 255, 0, 1);
  left: 25px;
  top: 50px;
}

Blend mode

The mix-blend-mode property controls the blend mode used for the elements. It accepts values such as normal, screen, overlay, darken, and so on. You can find a complete list of accepted values and their explanations here.

Lastly, there is also a background-blend-mode property that controls how an element's background images and background colors could blend with each other. For example,

<div></div>

div {
  width: 300px;
  height: 400px;
  background-image: url(. . .);
  background-size: cover;
  background-color: violet;

  background-blend-mode: difference;
}
<GradientFilters>