CSS Blend Mode Generator

What this tool is used for

• Previewing how two layers interact before committing to a blend mode.
• Producing a duotone effect from an image and a colour.
• Comparing mix-blend-mode against background-blend-mode for one case.
• Getting a multiply or screen effect without an image editor.
• Checking how a blend reads over a photograph.

Frequently Asked Questions

What is the difference between mix-blend-mode and background-blend-mode?

What they blend with. `mix-blend-mode` blends an element with whatever is behind it in the page; `background-blend-mode` blends an element's own background layers with each other. Reaching for the wrong one is why a blend sometimes appears to do nothing.

Which modes do what?

`multiply` always darkens (white is a no-op), `screen` always lightens (black is a no-op), and `overlay` does both depending on the base. `difference` and `exclusion` invert, which makes them the practical choice for text that must stay legible over an unknown image.

Why did my blend suddenly stop working?

Something created a new stacking context. `opacity` below 1, a `transform`, a `filter`, `will-change` or `position: fixed` on an ancestor isolates the element, and it can then only blend within that group. `isolation: isolate` does it deliberately — which is also the fix when you want to contain a blend.

Are blend modes expensive to render?

They can be. Blending forces the browser to composite layers together on every paint, so a full-screen blended element that also animates will drop frames on a low-end device. Test on real hardware before committing to one in a hero section.

Do they work the same in design tools?

Mostly — the formulas come from the same PDF/Photoshop specification. The differences come from colour space: browsers blend in sRGB by default, and a tool working in a wider space will produce visibly different results for saturated colours.

Why does isolation matter when blending?

Because a blend reaches through to whatever is behind it in the stacking context, which can be further back than you intended. Setting isolation: isolate on a wrapper creates a new context so the blend stops at that boundary.

Common errors and gotchas

• Confusing mix-blend-mode with background-blend-mode, which blend different things.
• Blending text, which frequently destroys contrast and legibility.
• Assuming blend results are identical across browsers, since colour space handling differs.
• Creating a stacking context by accident, which changes what the element blends with.
• Relying on a blend for a meaningful colour, which then varies with whatever sits behind it.