What is CSS Blend Mode

Code Playground is only enabled on larger screen sizes.

Blend mode

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

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.

Background blend mode

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

<div></div>

div {
  width: 300px;
  height: 400px;
  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;
  background-color: violet;

  background-blend-mode: difference;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

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

</html>

Open Sandbox