mix-blend-mode

Definition

The mix-blend-mode CSS property is used to specify how an element’s content should blend with the content of its parent and underlying elements. It affects the visual appearance by defining the blending mode for the element’s rendered pixels.

The mix-blend-mode property accepts different blending modes, including:

normal: The default blending mode, where the element’s content is rendered as is.
multiply: Multiplies the colors of the element’s content with the background, creating a darker appearance.
screen: Inverts the colors of the element’s content and the background, resulting in a lighter appearance.
overlay: Combines the multiply and screen blending modes, producing a high-contrast effect.
color-dodge: Brightens the element’s content based on the background color.
color-burn: Darkens the element’s content based on the background color.
Many more blending modes are available.

Here’s an example:

.blend-mode-example {
  mix-blend-mode: multiply;
}

In this example, the .blend-mode-example class applies the multiply blending mode to the element. This causes the element’s content to blend with the background by multiplying their colors together.

The mix-blend-mode property offers creative possibilities for blending and compositing elements in CSS. It allows you to achieve interesting visual effects and create unique designs by altering the blending behavior of an element with its surroundings.

Syntax

.badge {
  mix-blend-mode: screen;
}

Values

normal: no blending (default).
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.

Practical Examples

.badge {
  mix-blend-mode: screen;
}

Blend modes let foreground elements interact with backgrounds for rich graphic effects.

HTML

Screen blend

Code

<div class="relative flex h-40 items-center justify-center overflow-hidden rounded-2xl border border-slate-200 bg-slate-900">
  <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=800&q=80" alt="City" class="absolute inset-0 h-full w-full object-cover opacity-80">
  <span class="relative inline-flex items-center rounded-full bg-sky-500 px-4 py-2 text-sm font-semibold text-white" style="mix-blend-mode: screen;">Screen blend</span>
</div>

Tips & Best Practices

Blend modes depend on what is behind the element—test against light and dark themes.
Use isolation: isolate; on containers to scope blending when necessary.
Provide fallbacks for browsers that ignore blending by ensuring the element still looks acceptable.

Accessibility & UX Notes

Blends can reduce contrast; check readability and provide alternate styling when necessary.

Browser Support

Supported in modern browsers (Chrome 41+, Firefox 32+, Safari 8+, Edge). IE does not support blending.

background-blend-mode for blending background layers.
isolation to control stacking contexts impacted by blending.
opacity and filter for additional compositing effects.