background-blend-mode

Definition

The background-blend-mode property sets how an element’s background images should blend with each other and the element’s background color.

Syntax

.hero {
  background-image: linear-gradient(120deg, #0ea5e9, #6366f1), url("/images/forest.jpg");
  background-blend-mode: multiply;
}

Values

normal: draw layers without blending (default).
multiply, screen, overlay, darken, lighten: Porter-Duff style blend modes.
color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity: creative compositing options.

Practical Examples

.hero {
  background-image: linear-gradient(135deg, #0ea5e9, #6366f1),
    url("https://images.unsplash.com/photo-1475721027785-f74eccf877e2?auto=format&fit=crop&w=900&q=80");
  background-blend-mode: multiply;
}

Blend gradients over photography to create branded overlays without editing the source image.

HTML

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="h-36 rounded-xl border border-slate-200" style="background: url('https://images.unsplash.com/photo-1475721027785-f74eccf877e2?auto=format&fit=crop&w=900&q=80') center/cover no-repeat;"></div>
  <div class="h-36 rounded-xl border border-slate-200" style="background: linear-gradient(135deg, #0ea5e9, #6366f1), url('https://images.unsplash.com/photo-1475721027785-f74eccf877e2?auto=format&fit=crop&w=900&q=80') center/cover no-repeat; background-blend-mode: multiply;"></div>
</div>

Tips & Best Practices

Combine with background-color fallbacks for browsers that lack blend support.
Experiment with multiple gradient layers to craft brand-specific overlays.
Use mix-blend-mode on foreground elements when you need the blend to impact underlying content instead.

Accessibility & UX Notes

Check contrast after applying blends—multiplying darker gradients can reduce legibility quickly.

Browser Support

Supported in modern browsers (Chrome 35+, Firefox 30+, Safari 8+, Edge). IE11 does not support blend modes.

mix-blend-mode for blending foreground elements.
filter and backdrop-filter to enhance layered effects.
background-image for supplying the layers to blend.