CSS Blend Modes & mix-blend-mode

CSS Blend Modes let you control how an element’s content blends with the background or other elements. Think of it like Photoshop blending layers — you can create creative visual effects without editing images externally.

mix-blend-mode is the main property used to blend an element with the background.

Syntax

selector {
  mix-blend-mode: blend-mode;
}

Common blend modes:

• normal → default, no blending
• multiply → multiplies the colors, darkening the result
• screen → lightens the result
• overlay → mix of multiply and screen, preserves highlights & shadows
• darken → keeps the darker color
• lighten → keeps the lighter color
• color-dodge / color-burn → brightens or darkens based on base colors
• difference → subtracts colors, creating contrast
• exclusion → similar to difference but softer
• hue / saturation / color / luminosity → affects color properties

Basic Mix-Blend-Mode

In this example, the image colors multiply with the yellow background, creating a darker effect.

<div class="background"></div>
<img src="image.jpg" alt="Blend Mode Example" class="blend-img">

.background {
  width: 500px;
  height: 300px;
  background: yellow;
  position: absolute;
}

.blend-img {
  width: 500px;
  mix-blend-mode: multiply;
  position: relative;
}

Overlay Text with Blend Mode

The text blends with the image, creating a dynamic overlay effect.

<div class="container">
  <img src="image.jpg" alt="Blend Example">
  <h2 class="blend-text">Hello World</h2>
</div>

.container {
  position: relative;
  width: 400px;
}

.container img {
  width: 100%;
}

.blend-text {
  position: absolute;
  top: 50px;
  left: 50px;
  font-size: 2rem;
  color: white;
  mix-blend-mode: screen; /* Blends text with the image */
}

Creative Background Effects

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

.box {
  width: 200px;
  height: 200px;
  display: inline-block;
}

.red {
  background: red;
}

.blue {
  background: blue;
  mix-blend-mode: screen;
}