CSS Blend Modes

Imagine overlaying two clear plastic slides. Slide one has a blue square printed on it, and slide two has a red circle. If you place them on a projector, the overlapping area turns purple because the light shines through and blends the colors together. CSS blend modes are those color-blending rules. They allow you to blend the colors of overlapping elements or background images together, creating beautiful, professional textures and design patterns.

In this page:

The Blend Mode Concept
Blending Background Layers
Multiplying Colors with multiply
Screen Blend Overlays
Text Inversion with difference

The Blend Mode Concept

Blend modes determine how an element's colors blend with the colors of the elements behind it. CSS provides two properties: mix-blend-mode (to blend separate overlapping HTML elements) and background-blend-mode (to blend multiple background layers inside a single element). The isolation property creates a new stacking context on an element, which is useful when you want a group of elements to blend with each other but stay isolated from blending with anything behind the group -- setting isolation: isolate on their shared parent contains the blending effect to just that group.

Note: Use blend modes to create high-performance color overlay effects without needing to load separate, pre-blended image assets.

Warning: Ensure your text remains readable when using blend modes, as complex color blending can lower text contrast.

Example: The Blend Mode Concept

css

<style>
.group {
  isolation: isolate;
  background: white;
  padding: 30px;
}
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: crimson;
  mix-blend-mode: multiply;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>
<div class="group">
  <div class="circle">Blends with siblings, isolated from behind</div>
</div>

Blending Background Layers

The background-blend-mode property blends multiple background layers (like a background image and a solid color gradient) inside a single element, creating a tinted overlay effect.

Note: Combine a dark brand color with a grayscale background image using the multiply blend mode to create a consistent, tinted layout card.

Warning: Background blend modes only work on properties declared inside the background-image rule.

Example: Blending Background Layers

css

<style>
.box {
  background-image: url('https://placehold.co/200x150'), linear-gradient(navy, navy);
  background-blend-mode: multiply;
}
</style>
<div class="box">Tinted background layers</div>

Multiplying Colors with multiply

The multiply blend mode multiplies the colors of the overlapping layers, always resulting in a darker color blend. It works exactly like layering two translucent color slides on top of each other.

Note: Use multiply to cleanly overlay text over dark background photos without needing complex CSS gradients.

Warning: Multiplying dark colors can quickly result in solid black, so ensure your backgrounds have high contrast.

Example: Multiplying Colors with multiply

css

<style>
.overlay {
  mix-blend-mode: multiply;
  background: red;
}
</style>
<div style="background: url('https://placehold.co/200x100')">
  <div class="overlay">Multiply darkens overlapping colors</div>
</div>

Screen Blend Overlays

The screen blend mode is the opposite of multiply: it multiplies the inverse of the overlapping layers, always resulting in a lighter color blend. This is perfect for blending bright elements on top of dark backdrops.

Note: Use the screen blend mode to cleanly overlay bright, glowing graphics on dark background panels.

Warning: Screening light colors against light backgrounds can quickly result in solid white, washed-out layouts.

Example: Screen Blend Overlays

css

<style>
.glow {
  mix-blend-mode: screen;
  background: yellow;
}
</style>
<div style="background: black">
  <div class="glow">Screen lightens overlapping colors</div>
</div>

Text Inversion with difference

The difference blend mode subtracts the darker color value from the lighter color value. This is incredibly useful for creating accessible, auto-inverting text headers that automatically switch from black to white as they slide across light and dark page layouts.

Note: Use the difference blend mode to ensure your headers remain perfectly readable over busy, multi-colored background images.

Warning: Difference styling can look strange on intermediate, low-contrast gray backgrounds, so test contrast levels carefully.

Example: Text Inversion with difference

css

<style>
h1 {
  mix-blend-mode: difference;
  color: white;
}
</style>
<div style="background: url('https://placehold.co/400x100')">
  <h1>Auto-inverting header</h1>
</div>

Common Mistakes

Using background-blend-mode on standard HTML img tags; use mix-blend-mode or load the image as a background asset instead.
Forgetting to set a background color when attempting to use background-blend-mode, resulting in no blend effect.
Combining low-contrast colors that make your text unreadable and violate accessibility guidelines.

Chapter Summary

Blend modes determine how an element's colors blend with the colors of the elements behind it.
Use mix-blend-mode to blend separate overlapping HTML elements, and background-blend-mode to blend background layers within a single element.
Apply multiply to darken layouts, screen to brighten designs, and difference to create auto-inverting, accessible text headers.

Browser Support

Standard CSS mix-blend-mode and background-blend-mode properties are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Filters Next Lesson → CSS Transforms