CSS 'mix-blend-mode' Property: Complete Reference

CSS `mix-blend-mode` Property: Complete Reference

The CSS mix-blend-mode property defines how an element's content should blend with the content behind it (its background or parent elements). It brings the visual blending techniques from graphic design and image editing software (like Photoshop or GIMP) directly into the browser, enabling rich, composited visual effects without JavaScript or SVG filters.

What Is `mix-blend-mode`?

mix-blend-mode is a CSS property that applies a blending effect to an element and all of its descendants. It controls how the colors of the element combine with the colors of the elements below it in the stacking context. The property accepts a keyword value that corresponds to one of the standard blend modes defined in the Compositing and Blending specification.

/* Syntax */
element {
  mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;
}

Why It Matters

Creative visual effects – Create overlays, masks, and artistic compositions using only CSS.
Performance – GPU-accelerated in modern browsers, often faster than JavaScript-based pixel manipulation.
Responsive and maintainable – No external assets or heavy libraries needed.
Accessible – Works with text, images, gradients, and any other HTML content.

How to Use `mix-blend-mode`

Basic Example: Text Over an Image

Place text over a background image and blend it using the difference mode to create a high-contrast, inverted effect.

<div class="blend-container">
  <h1 class="blend-text">Creative CSS</h1>
</div>

.blend-container {
  background: url('landscape.jpg') center/cover no-repeat;
  width: 600px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blend-text {
  color: white;
  font-size: 4rem;
  font-weight: bold;
  mix-blend-mode: difference;
}

In this example, the white text will invert the background color beneath it, creating a striking visual.

Blending Multiple Layers

You can stack multiple elements and apply different blend modes to each layer.

<div class="stack">
  <div class="layer layer-1"></div>
  <div class="layer layer-2"></div>
  <div class="layer layer-3"></div>
</div>

.stack {
  position: relative;
  width: 500px;
  height: 300px;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layer-1 {
  background: linear-gradient(45deg, #ff6b6b, #feca57);
}

.layer-2 {
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.3) 10px, rgba(255,255,255,0.3) 20px);
  mix-blend-mode: overlay;
}

.layer-3 {
  background: radial-gradient(circle at 50% 50%, #48dbfb 0%, transparent 70%);
  mix-blend-mode: screen;
}

Using with `isolation` Property

The isolation property controls whether an element creates a new stacking context, which can limit the blending scope. Set isolation: isolate on a parent to prevent its children from blending with elements outside that parent.

<div class="group" style="isolation: isolate;">
  <div class="blend">Blends only inside this group</div>
</div>
<div class="background">This background is not affected</div>

.group {
  position: relative;
  background: #ddd;
  padding: 20px;
}

.blend {
  mix-blend-mode: multiply;
  background: #ff0;
}

Interactive Example: Blend Mode Selector

Combine with JavaScript to let users toggle blend modes.

<select id="modeSelect">
  <option value="normal">Normal</option>
  <option value="multiply">Multiply</option>
  <option value="screen">Screen</option>
  <option value="overlay">Overlay</option>
  <option value="difference">Difference</option>
</select>

<div id="demo" class="demo-box">
  <div class="overlay">Hover me</div>
</div>

.demo-box {
  width: 300px;
  height: 200px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #fff 0, #fff 10px, transparent 10px, transparent 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #000;
  transition: mix-blend-mode 0.3s;
}

document.getElementById('modeSelect').addEventListener('change', function() {
  document.querySelector('.overlay').style.mixBlendMode = this.value;
});

All Blend Modes at a Glance

normal – No blending; the top element is drawn as is.
multiply – Multiplies the pixel values; darkens the result (like stacking two slides).
screen – Inverts, multiplies, and inverts again; lightens the result (like two projectors).
overlay – Combines multiply and screen; increases contrast.
darken – Takes the darker of the two colors per channel.
lighten – Takes the lighter of the two colors per channel.
color-dodge – Lightens the bottom layer to reflect the top layer.
color-burn – Darkens the bottom layer to reflect the top layer.
hard-light – Like overlay but with the top layer acting as the light source.
soft-light – A softer version of hard-light.
difference – Subtracts the darker from the lighter; creates inversion.
exclusion – Similar to difference but lower contrast.
hue – Uses the hue of the top layer with saturation and luminosity of the bottom.
saturation – Uses the saturation of the top layer with hue and luminosity of the bottom.
color – Uses the hue and saturation of the top layer with luminosity of the bottom.
luminosity – Uses the luminosity of the top layer with hue and saturation of the bottom.

Best Practices

Test across browsers – While modern browsers support all standard blend modes, older ones may fall back to normal. Use @supports (mix-blend-mode: multiply) for feature detection.
Avoid blending on large areas with heavy repaints – Although GPU-accelerated, excessive blending of large animated elements can impact performance. Use sparingly on high-frequency animations.
Combine with background-blend-mode – For blending an element’s background layers together (without affecting child content), use background-blend-mode instead.
Mind accessibility – Blending can reduce text contrast. Always ensure sufficient color contrast, especially when blending text. Consider providing a fallback style without blending.
Use isolation: isolate to limit blending scope – This prevents unexpected blending with elements outside the intended stacking context.
Prefer mix-blend-mode over JavaScript for static effects – It is more declarative, easier to maintain, and often hardware-accelerated.

Conclusion

The mix-blend-mode property is a powerful tool in the CSS designer's toolkit, enabling complex compositing effects with minimal code. By understanding each blend mode's behavior and applying best practices like feature detection, performance awareness, and accessibility checks, you can create visually rich user interfaces and artistic layouts that are both performant and maintainable. Experiment with different combinations of images, gradients, and text to unlock creative possibilities directly in the browser.