CSS mix-blend-mode Property

What You’ll Learn

The mix-blend-mode property controls how an element blends with the content behind it. It is useful for artistic overlays, inverted text effects, and creative compositions.

Introduction

The mix-blend-mode property in CSS allows you to control how the content of an element blends with the content of the element’s parent and the background behind it.

This property is particularly useful for creating artistic effects, such as overlays and color changes, by blending elements together using different modes.

Definition and Usage

The mix-blend-mode CSS property specifies how an element should blend with the backdrop behind it. That backdrop can include parent backgrounds, images, gradients, and other elements in the same stacking context.

This makes it possible to create dynamic text effects, tinted overlays, and bold hero compositions directly in CSS.

📝 Syntax

The syntax for the mix-blend-mode property is straightforward. You can apply it to any element to define how its content should blend with the content beneath it.

Apply mix-blend-mode to any element to define how it blends with content beneath it:

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

Here, blend-mode can be any of the predefined blending modes.

Basic Example

h1 {
  font-size: 3rem;
  color: #fff;
  mix-blend-mode: difference;
}

Common Blend Mode Keywords

• normal — no blending; default behavior
• multiply, screen, overlay — popular general-purpose modes
• darken, lighten, color-dodge, color-burn
• hard-light, soft-light, difference, exclusion
• hue, saturation, color, luminosity

Syntax Rules

• You can apply one blend mode to the entire element.
• The initial value is normal.
• It affects how the element composites with the backdrop, including parent backgrounds and elements behind it.
• It works on text, images, shapes, and entire panels.
• For blending only the element’s own background layers, use background-blend-mode instead.

🎯 Default Value

The default value of mix-blend-mode is normal, which means no blending is applied and the element is drawn on top of the backdrop without any special compositing.

💎 Property Values

These are the predefined blending modes you can use with mix-blend-mode.

What Gets Blended?

mix-blend-mode blends the element with the backdrop behind it, including:

• Parent backgrounds — colors, gradients, and images on the parent element
• Elements beneath — siblings or ancestors visible through stacking
• Text and shapes — headlines, icons, and panels over photos or gradients
• Hero compositions — one of the most popular beginner patterns

mix-blend-mode vs background-blend-mode

Examples Gallery

Try mix-blend-mode with difference text, multiply overlays, screen highlights, and a side-by-side mode comparison.

<style>
  body {
    background: linear-gradient(135deg, #2563eb, #db2777, #facc15);
    min-height: 100vh;
    display: grid;
    place-items: center;
    color: #fff;
  }
  h1 {
    font-size: 3rem;
    mix-blend-mode: difference;
  }
</style>

<h1>Blending Text with Background</h1>

.stage {
  background: linear-gradient(135deg, #facc15, #ef4444);
  padding: 2rem;
}
.overlay {
  background: #1e3a8a;
  padding: 1.5rem;
  mix-blend-mode: multiply;
}

.stage {
  background: repeating-linear-gradient(45deg, #dbeafe, #dbeafe 10px, #93c5fd 10px, #93c5fd 20px);
  padding: 2rem;
}
.shape {
  width: 8rem;
  height: 5rem;
  background: #db2777;
  mix-blend-mode: overlay;
}

.tile {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff;
}
.difference { mix-blend-mode: difference; }
.multiply { mix-blend-mode: multiply; }

💡 Best Practices