CSS Blend Mode Previewer

Preview all CSS mix-blend-mode and background-blend-mode options on two layered images in real time.

Tested tool guide Tested browser tools Checked August 15, 2026

What CSS Blend Mode Previewer does, with a checked example

This tool stacks two images you load locally and lets you flip through every mix-blend-mode and background-blend-mode value from a dropdown, updating the composite instantly because it applies the real CSS property to live layers rather than simulating the math in JavaScript. What trips people up is the difference between the two properties: mix-blend-mode blends an element against the backdrop formed by content stacked beneath it within its stacking context, while background-blend-mode only blends layers within one element's own background stack, so a mode that looks identical here can render differently once copied into a page with other content behind it or a different stacking/isolation context.

Worked example

A concrete input and expected output from the current implementation.

Input

Base layer: solid red square (#FF0000). Top layer: solid blue square (#0000FF). Mode: multiply.

Expected output

Composite renders solid black (#000000).

Multiply computes each channel as base times blend; red contributes zero in the green and blue channels, blue contributes zero in the red and green channels, so every resulting channel is zero.

How the result is produced

Live CSS application

Selecting a mode sets the actual mix-blend-mode or background-blend-mode CSS value on the layered elements, so the preview is the browser's own compositing output rather than an approximation. Switching modes swaps the property and the browser repaints immediately, which also means the result reflects whatever that specific browser engine actually does with the spec's blend formulas.

Two independent layer setups

The previewer keeps mix-blend-mode and background-blend-mode as separate contexts: one blends a top image against a bottom one as stacked elements, the other blends two images as background layers within a single element. You load or swap images into each slot and switch layer order, then compare how the same nominal mode reads in each context.

Good uses

Testing how a photo will read with mix-blend-mode: overlay or screen before writing the CSS for a hero section
Picking a duotone or color-wash blend mode for a background image without trial-and-error in devtools
Checking whether text or a logo layered with a blend mode stays legible against a busy background image

Limits and checks

Blend formulas are standardized by the CSS Compositing spec, but color management (sRGB handling, wide-gamut displays) can shift pixel output slightly between browsers, so treat this as close, not pixel-identical, to production rendering
mix-blend-mode results depend on stacking context and whatever sits behind the element on the real page; this isolated two-layer preview cannot show how the mode behaves once dropped among other page content or inside a new stacking/isolation context
mix-blend-mode and background-blend-mode share identical mode names, so it is easy to preview a mode in the wrong one and copy CSS that targets the property you did not actually check

Common questions

Do my images get uploaded anywhere?

No. The tool runs entirely in the browser; loaded images are read locally to render the composite and are never sent to a server.

Why does the same mode look different between the mix-blend-mode and background-blend-mode views?

They blend different things. mix-blend-mode blends the element against the backdrop formed by whatever is stacked beneath it within the same stacking context, and an isolate or a new stacking context can limit what that backdrop includes, while background-blend-mode blends only the background layers inside one element. The per-mode formula is the same, but what counts as the backdrop differs between the two.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.