CSS Blend Modes Cheatsheet: Interactive Visual Guide

October 28, 2026  |  Cheatsheet  |  CSS

By Syed · Frontend Engineer & Creator of UITweak

A blend mode changes how two colors combine where they overlap, instead of the top color simply covering the bottom one. Multiply darkens like overlapping ink, screen lightens like projected light, and difference inverts what sits beneath. Once you know which group a mode belongs to, you can predict the result before you try it, which is faster than cycling through all sixteen by trial and error.

Try mix-blend-mode live

Pick a mode from the dropdown. The cyan circle blends with the gradient behind it, and the CSS updates with your choice. Start with multiply, screen, difference, and exclusion, since those show the biggest changes.

.blend-top {
  mix-blend-mode: multiply;
}

mix-blend-mode vs background-blend-mode

The two properties share the same sixteen values, but they blend different things, and mixing them up is the most common beginner mistake. mix-blend-mode blends the whole element with everything painted below it: the backdrop is the rest of the page behind the element. background-blend-mode blends only the element's own background layers with each other, such as two background images, or an image with a background color. Nothing outside the element is involved.

/* Element blends with the page behind it */
.overlay-text {
  mix-blend-mode: difference;
}

/* Two backgrounds on one element blend together */
.tinted {
  background-image: url("photo.jpg"), linear-gradient(#6366f1, #6366f1);
  background-blend-mode: multiply;
}

A practical way to remember it: if the thing you want to blend with is a separate element, you need mix-blend-mode. If both layers live inside one element's background, you need background-blend-mode. When a mix blend seems to do nothing, the usual cause is that there is nothing visible behind the element to blend with, which the isolation section below explains.

All 16 blend modes, grouped

The modes fall into five groups, plus normal. Learn the group behavior first, and the individual modes become variations on a theme instead of sixteen separate facts.

Try background-blend-mode live

This demo blends two gradient layers on a single element. Switch modes and watch the same two layers produce completely different results. This is the property to reach for when you want a tinted or textured background without extra elements.

.blend-bg {
  background-image: linear-gradient(135deg, #f59e0b, #ef4444), linear-gradient(225deg, #06b6d4, #8b5cf6);
  background-blend-mode: multiply;
}

Isolation: keeping blends contained

By default, mix-blend-mode blends an element with everything behind it, all the way down to the page background. Sometimes that is too much: a heading meant to blend with its card ends up blending with the page behind the card too. The fix is isolation: isolate on the parent, which creates a new stacking context and limits blending to inside that parent.

.card {
  isolation: isolate;
}

.card h2 {
  mix-blend-mode: multiply;
}

Put isolation: isolate on the nearest ancestor that should contain the effect, not on the blended element itself. On the element itself it does nothing useful, because the element still blends with everything below it inside the same context.

Blend mode examples: recipes

Duotone image. Make the image grayscale, then layer a solid color over it with color blend, or use background-blend-mode with a color layer. One hue across the whole image reads as a deliberate brand treatment instead of a random photo.

Readable text over a photo. A white heading with mix-blend-mode: difference inverts against whatever sits behind it, so it stays readable on both light and dark parts of the photo. Test it on real photos, because very mid-tone areas can still wash out.

Image tint without editing the file. A color layer with multiply darkens and tints in one step, which is how you recolor a photo for a dark section without opening an image editor or shipping a second file.

/* Duotone: grayscale photo, one color over it */
.duotone {
  position: relative;
}
.duotone img {
  filter: grayscale(100%);
}
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #4f46e5;
  mix-blend-mode: color;
}

/* Readable heading over any photo */
.hero h1 {
  color: #ffffff;
  mix-blend-mode: difference;
}

Performance and fallback notes

Blending is computed per pixel, so a blend mode over a large area or on an animated element costs more than a plain background. Keep blends on bounded areas like cards and headings, and avoid animating the blend mode itself on full-screen layers.

Every current browser supports both blend properties, so support is rarely the problem. The real fallback question is readability: design the page so text stays readable even if blending were switched off, because a blend that carries all the contrast will fail the moment the backdrop changes.