← Back to CSS Course | Chapter 8: Animations & Effects | Lesson 4 of 22

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:

  1. The Blend Mode Concept
  2. Blending Background Layers
  3. Multiplying Colors with multiply
  4. Screen Blend Overlays
  5. Text Inversion with difference
Syntax
css 
selector {
  mix-blend-mode: multiply | screen | overlay | difference;
  background-blend-mode: value;
}

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.
  • Accepted values:
  • normal — no blending (default)
  • multiply — darkens by multiplying colors
  • screen — lightens the result
  • overlay — combines multiply and screen
  • darken | lighten — keep the darker or lighter color
  • color-dodge | color-burn — brighten or darken the base using the top layer
  • hard-light | soft-light — strong or gentle contrast
  • difference | exclusion — subtracts colors
  • hue | saturation | color | luminosity — HSL-based modes
  • Used with mix-blend-mode and background-blend-mode
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • background-blend-mode: normal — default, no blending
  • multiply — darkens by multiplying colors
  • screen — lightens
  • overlay — combines multiply and screen
  • darken | lighten — keeps darker or lighter channel
  • color-dodge | color-burn | hard-light | soft-light — more contrast modes
  • difference | exclusion — inverting modes
  • hue | saturation | color | luminosity — non-separable modes
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • multiply — result is darker or equal, white is neutral
  • mix-blend-mode: multiply — blends the element with what is behind it
  • background-blend-mode: multiply — blends an element's own backgrounds
  • color-burn — a stronger darkening mode
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.
  • Accepted values:
  • screen — result is lighter or equal, black is neutral
  • lighten — keeps the lighter of the two colors
  • color-dodge — brightens the base using the top layer
  • mix-blend-mode: screen — blends with the backdrop
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.
  • Accepted values:
  • difference — subtracts the darker color from the lighter one
  • exclusion — similar but with lower contrast
  • mix-blend-mode: difference — applies it to an element
  • white text on a background — inverts the background colors
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>
Live Example
Related Topics

CSS Writing Modes · CSS Filters · CSS Transforms · CSS Shadows

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using background-blend-mode on standard HTML img tags; use mix-blend-mode or load the image as a background asset instead.
  2. Forgetting to set a background color when attempting to use background-blend-mode, resulting in no blend effect.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.