blend-mode Basics

mix-blend-mode vs background-blend-mode — how pixels combine, isolation, and the stacking/readability traps in product UI.

advanced3 min readUpdated Aug 4, 2026

css
blend-mode
visual

Blend modes composite colors the way design tools do: multiply darkens, screen lightens, overlay punches contrast. In CSS you get two main switches — mix-blend-mode (element vs backdrop) and background-blend-mode (layers within one element’s backgrounds).

Docs: MDN mix-blend-mode, MDN background-blend-mode, Compositing & Blending.

Two properties, two scopes

/* Blend this element’s rendered output with what’s behind it */
.badge {
  mix-blend-mode: multiply;
}

/* Blend multiple backgrounds on the same element */
.hero {
  background-image: linear-gradient(45deg, #0b6bcb, transparent), url("/hero.jpg");
  background-blend-mode: multiply;
}

Property	What blends
`mix-blend-mode`	Entire element (with descendants as a group, subject to isolation) against the backdrop
`background-blend-mode`	The element’s own `background-image` / `background-color` layers

Common values: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color, luminosity.

Practical UI patterns

Text over photography

.hero__title {
  color: white;
  mix-blend-mode: difference; /* or exclusion — test per image */
}

difference can keep type readable across light and dark photo regions, but it’s unpredictable. Prefer a scrim:

.hero {
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.65), transparent 55%),
    url("/hero.jpg") center/cover;
}

Scrims are boring and shippable. Blend modes are for deliberate graphic effect.

Tint a photo with brand color

.thumb {
  background-image: linear-gradient(var(--brand), var(--brand)), url("/thumb.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}

Knockout / multiply icons on variable backgrounds

.icon-muted {
  mix-blend-mode: multiply;
  opacity: 0.9;
}

In dark mode, multiply often fails (needs screen or a different asset). Theme-aware blend modes or separate assets are safer.

Isolation: the footgun that “breaks” blend

.card {
  isolation: isolate; /* new stacking context; blend stops here */
}

.card__glow {
  mix-blend-mode: screen; /* blends within .card, not with page wallpaper */
}

isolation: isolate, opacity < 1, certain transform/filter values, and other stacking-context creators change what the element blends with. If multiply “does nothing,” check ancestors for isolation or opacity.

<section class="page">
  <div class="card">
    <span class="card__label">New</span>
  </div>
</section>

.page {
  background: #f4f0ea;
}
.card__label {
  color: #c45c26;
  mix-blend-mode: multiply;
}

Accessibility and product constraints

Blended text can fail contrast on some photo regions — measure worst case, not the happy Figma frame.
Don’t encode meaning only in a blended color difference.
Animating blend modes is a paint/compositing cost; prefer opacity/transform for motion when possible.
Print and email clients: assume no blend modes.

Interview out-loud

“background-blend-mode mixes an element’s own background layers. mix-blend-mode mixes the element with its backdrop. Stacking contexts and isolation limit how far mix blending reaches. For UI text on images I usually prefer a gradient scrim for contrast, and use blend modes for graphic treatments where contrast is still verified.”

Footguns

Expecting Photoshop parity — gamma and layer groups differ.
Forgetting dark-theme inverses of multiply/screen.
Blending away focus outlines or borders.
Putting mix-blend-mode on a parent and wondering why every child looks wrong.
Using difference on body text in a content product.