CSS Blend Modes

Introduction

CSS blend modes control how element colors interact with colors behind them, like Photoshop layer blending. They enable duotone images, colored overlays, and textured backgrounds purely in CSS.

Two properties: mix-blend-mode (blends with everything behind) and background-blend-mode (blends element's own backgrounds). Both accept the same values.

Create rich visuals without pre-processing images — flexible assets, small file sizes.

Key Concepts

mix-blend-mode

css

.overlay-text { mix-blend-mode: multiply; }
.floating-element { mix-blend-mode: screen; }

background-blend-mode

css

.hero {
  background-image: url('photo.jpg');
  background-color: #3b82f6;
  background-blend-mode: multiply;
}

Common modes: multiply (darkens), screen (lightens), overlay (contrast), soft-light (tint), difference (inversion).

Practical Examples

1. Duotone Effect

css

.duotone { background: #ff6b35; }
.duotone img {
  mix-blend-mode: multiply;
  filter: grayscale(100%) contrast(1.1);
  display: block; width: 100%;
}

2. Textured Background

css

.textured {
  background-image: url('noise.png'), linear-gradient(135deg, #667eea, #764ba2);
  background-blend-mode: overlay;
}

3. Color Overlay on Hover

css

.card-image::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--color-primary);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.3s;
}
.card-image:hover::after { opacity: 1; }

Best Practices

multiply for darkening, screen for lightening.
Use isolation: isolate to contain blend effects.
Grayscale images first for predictable duotone.
Test across different images — results are content-dependent.
Combine with gradients for creative hero sections.

Common Pitfalls

Not using isolation: isolate — blends with all content behind.
Blend modes interact with z-index/stacking contexts.
Inconsistent results across different images.
Colors can become unreadable depending on background.

Browser Support

mix-blend-mode/background-blend-mode: Chrome 41+, Safari 8+, Firefox 32+, Edge 79+. ~97%. GPU-accelerated.

CSS Filter Effects — combine with blend modes
CSS Color Functions — oklch with blend modes
CSS Pseudo-Elements Masterclass — blend modes on overlays