CSS Blend Modes: Creative Effects with mix-blend-mode

If you've ever used layers in Photoshop, Figma, or Affinity, you've met blend modes: settings like Multiply, Screen, and Overlay that control how a layer's colors combine with the layers beneath it. CSS has the same blend modes, and they let you build duotone photos, text that inverts over any background, knockout headlines, and tinted image grids without touching an image editor.

There are two properties involved. mix-blend-mode blends an element with whatever sits behind it. background-blend-mode blends an element's own background layers with each other. This guide focuses on mix-blend-mode, covers background-blend-mode where it's the better fit, and explains the isolation property that keeps blending under control.

How Blending Works

Every blend mode is a formula that takes two colors, the source (the element on top) and the backdrop (what's behind it), and produces a result. The formulas run separately on each color channel, with values between 0 and 1.

.overlay-text {
  mix-blend-mode: multiply;
}

Here's what the most useful modes do, grouped by effect:

Group	Modes	Effect
Darken	multiply, darken, color-burn	Result is never lighter than the backdrop
Lighten	screen, lighten, color-dodge, plus-lighter	Result is never darker than the backdrop
Contrast	overlay, soft-light, hard-light	Darkens darks and lightens lights
Inversion	difference, exclusion	Subtracts colors, creating inverted looks
Component	hue, saturation, color, luminosity	Mixes hue, saturation, and lightness separately

A few formulas are worth memorizing because they explain so much:

• multiply : source × backdrop. White is neutral (anything times 1 is unchanged), and black always wins. Great for dropping out white backgrounds.
• screen : the inverse of multiply. Black is neutral, and white always wins. Great for dropping out black backgrounds.
• difference : |source - backdrop|. White inverts whatever is behind it, and black leaves it unchanged.
• color : takes the hue and saturation from the source and the luminosity from the backdrop. Perfect for tinting.

---

Example 1: Dropping Out a White Background

You have a product photo with a white background, and you want it to sit on a colored card as if it were a cutout. multiply makes the white disappear, because white multiplied by anything leaves that thing unchanged:

<div class="product-tile">
  <img src="/images/kettle-white-bg.jpg" alt="Stainless steel kettle" />
</div>

.product-tile {
  padding: 2rem;
  border-radius: 16px;
  background: #fde68a;
}

.product-tile img {
  display: block;
  width: 100%;
  mix-blend-mode: multiply;
}

The white areas take on the card's yellow, and the darker product shades stay visible. This works best with light backgrounds and photos with pure or near-white surroundings. On dark cards, the product itself darkens too much.

The mirror image is using screen to drop out a black background, for example a photo of fireworks or a glowing logo on black:

.glow-logo {
  mix-blend-mode: screen;
}

---

Example 2: Text That Inverts Over Any Background

A classic effect: a heading that appears white over dark areas and black over light areas, flipping mid-letter as it crosses a boundary.

<section class="split-hero">
  <h1 class="split-hero__title">Contrast</h1>
</section>

.split-hero {
  display: grid;
  place-items: center;
  min-height: 60vh;
  background: linear-gradient(to right, #0f172a 50%, #f8fafc 50%);
}

.split-hero__title {
  margin: 0;
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 900;
  color: #ffffff;
  mix-blend-mode: difference;
}

With white text and difference, the formula gives 1 - backdrop for each channel: over the navy half the text is nearly white, and over the off-white half it's nearly black. It's the same trick used by sites whose custom cursor inverts the content beneath it.

Keep in mind that difference over mid-tones produces mid-tones, which can hurt legibility. It's best on backgrounds with strong light and dark areas.

---

Example 3: Duotone Images

Duotones map an image's shadows to one color and highlights to another. You can approximate the effect with a grayscale image and two blended layers:

<figure class="duotone">
  <img src="/images/city.jpg" alt="City skyline at dusk" />
</figure>

.duotone {
  position: relative;
  margin: 0;
  background: #1e1b4b;
  isolation: isolate;
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(100%) contrast(1.1);
  mix-blend-mode: screen;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f472b6;
  mix-blend-mode: multiply;
}

Here's what happens:

1. The figure's dark indigo background acts as the shadow color.
2. The grayscale image uses screen over it, so dark pixels become indigo and light pixels stay light.
3. A pink layer on top uses multiply, tinting the highlights pink while keeping shadows dark.

The isolation: isolate on the figure keeps all of this blending contained inside the figure, which brings us to an important property.

---

isolation: Keeping Blends Contained

By default, a blended element mixes with everything painted behind it, all the way up to the nearest stacking context. That can produce surprises: your blended text might blend with the page background instead of the card you intended.

The isolation property fixes that:

.card {
  isolation: isolate;
}

isolation: isolate creates a new stacking context on the element. Any blended descendants only blend with content inside that element. Other properties create stacking contexts too, such as opacity below 1, transform, filter, or a z-index on a positioned element, and any of them will also contain the blending. isolation is the explicit, side-effect-free way to do it.

A related gotcha: a blended element with nothing behind it inside its stacking context blends with transparency, which looks like no blending at all. If an effect "doesn't work", check whether a parent is creating a stacking context that cuts the element off from the backdrop you expected.

---

background-blend-mode

When all the layers you want to blend are backgrounds on a single element, background-blend-mode is simpler. It blends an element's background layers with each other, and with its background-color, but not with anything outside the element.

.tinted-banner {
  min-height: 320px;
  background-color: #0ea5e9;
  background-image: url("/images/mountains.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: luminosity;
}

luminosity keeps the image's lightness and takes the hue and saturation from the sky-blue background color, giving an instantly on-brand tinted photo.

You can specify one blend mode per background layer:

.textured-card {
  background-color: #1f2937;
  background-image:
    url("/images/noise.png"), linear-gradient(135deg, #818cf8, #f472b6);
  background-blend-mode: overlay, normal;
}

The noise texture overlays the gradient, adding grain. Because background-blend-mode never leaks outside the element, you don't need isolation at all.

---

Example 4: Tinted Image Grids with Hover Reveal

A popular portfolio pattern: all thumbnails share a brand tint, and hovering reveals the original colors.

<ul class="gallery">
  <li class="gallery__item">
    <img src="/images/work-1.jpg" alt="Brand identity for a coffee roaster" />
  </li>
  <li class="gallery__item">
    <img src="/images/work-2.jpg" alt="Mobile banking app screens" />
  </li>
  <li class="gallery__item">
    <img src="/images/work-3.jpg" alt="Packaging for a skincare line" />
  </li>
</ul>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
}

.gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #818cf8;
  mix-blend-mode: color;
  transition: opacity 0.3s ease;
}

.gallery__item:hover::after,
.gallery__item:focus-within::after {
  opacity: 0;
}

The color blend mode applies the indigo hue and saturation while preserving each image's light and shadow detail. Fading the overlay's opacity on hover reveals the original photo.

Note that you can't smoothly transition mix-blend-mode itself, because it's a discrete property. Transition the overlay's opacity instead, as shown above.

---

Example 5: Knockout Text Over Video or Images

Using screen on black text over a white box, placed on top of a video, creates text that acts as a window onto the video:

<div class="knockout">
  <video src="/videos/waves.mp4" autoplay muted loop playsinline></video>
  <h2 class="knockout__text">OCEAN</h2>
</div>

.knockout {
  position: relative;
  display: grid;
  isolation: isolate;
}

.knockout video,
.knockout__text {
  grid-area: 1 / 1;
}

.knockout video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knockout__text {
  display: grid;
  place-items: center;
  margin: 0;
  font-size: clamp(4rem, 18vw, 14rem);
  font-weight: 900;
  color: #000;
  background: #fff;
  mix-blend-mode: screen;
}

With screen, the white box stays white and the black letters become transparent windows onto the video. For static images, background-clip: text is often simpler, but the blend approach works with video and any live content.

---

Pitfalls and Best Practices

• Readability first. Blend modes can make text contrast unpredictable. Test headings over every part of the backdrop, and avoid blending body text.
• Dark mode surprises. multiply on a dark background makes things nearly black, and screen on a light one washes everything out. If your site has themes, adjust or disable blend effects per theme.
• Performance. Blending requires the browser to composite layers with extra work. A few blended elements are fine, but blending large, frequently repainted areas, like a full-page video, can be costly on low-end devices.
• Stacking contexts. Use isolation: isolate on the component that should contain the effect. It's the fix for most "it's blending with the wrong thing" bugs.
• Print and forced colors. Blend effects may not print as expected, and forced colors mode can override them. Make sure content still makes sense without the effect.
• Provide alt text. Blending is decorative, but the underlying images still need meaningful alt attributes.

Browser Support

mix-blend-mode, background-blend-mode, and isolation are supported in all modern browsers. The component modes (hue, saturation, color, luminosity) had rendering inconsistencies in older Safari versions, so test those if you support older Apple devices. plus-lighter is newer, and support may lag in some browsers, so check caniuse before relying on it.

If you want to ensure a readable fallback where blending isn't supported, use @supports:

.split-hero__title {
  color: #f472b6;
}

@supports (mix-blend-mode: difference) {
  .split-hero__title {
    color: #ffffff;
    mix-blend-mode: difference;
  }
}

Conclusion

Blend modes bring layer-based image editing into CSS. multiply and screen drop out white and black backgrounds, difference creates text that adapts to what's behind it, color and luminosity tint images to match your brand, and combinations of blended layers produce duotones and knockouts that used to require exported assets.

Remember the two key tools: mix-blend-mode for blending an element with its backdrop, and background-blend-mode for blending background layers within one element. Add isolation: isolate to keep effects contained, test readability carefully, and you'll have a new set of creative tools that cost nothing to download.