What is CSS Blend Mode

The blend mode determines how elements can be mixed together when they overlap. For example,

html

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

css

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;
}

The mix-blend-mode property accepts values such as normal, screen, overlay, darken, and so on.

You can find a complete list of accepted values and their explanations here.

Background blend mode

The background-blend-mode property controls how an element's background images and background colors could blend with each other.

css

div {
  width: 300px;
  height: 400px;
 
  /* Set an image background */
  background-image: url(https://images.unsplash.com/photo-1705648336802-88f56d0d0cbc?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDkwMzYyODN8&ixlib=rb-4.0.3&q=85);
  background-size: cover;
 
  /* Set a color background */
  background-color: violet;
 
  background-blend-mode: difference;
}