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

mix-blend-mode blends an element with whatever is painted behind it in the page (its backdrop). background-blend-mode blends a single element's own multiple background layers (and background-color) with each other, without affecting other elements.

How does the multiply blend mode work?

multiply multiplies the backdrop and source channel values on a 0–1 scale: B = Cb × Cs. The result is always equal to or darker than both inputs. White (1) is neutral and leaves the backdrop unchanged, while any black pixel forces the result to black.

What are separable and non-separable blend modes?

Separable modes (multiply, screen, overlay, difference, etc.) apply their formula independently to the red, green and blue channels. The four non-separable modes — hue, saturation, color and luminosity — work on the whole colour in HSL space and cannot be computed one channel at a time.

Why is overlay the same as hard-light?

overlay and hard-light use the same piecewise formula, but with the backdrop and source swapped. overlay decides multiply-vs-screen based on the backdrop value; hard-light decides based on the source value. Swapping the operands turns one into the other.

Does this tool run offline?

Yes. The blend-mode table and channel calculator run entirely in your browser with JavaScript. Nothing is uploaded, logged or stored.

CSS Blend Modes Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

How colours combine when they overlap

CSS blend modes control the maths used when one layer is composited over another — the same Multiply, Screen and Overlay modes you know from image editors. They power mix-blend-mode (blend an element with the page behind it) and background-blend-mode (blend a box’s own background layers). This reference lists every value with its real W3C compositing formula and effect, plus a calculator that applies the formula to a single colour channel.

How it works

Separable modes work per channel on values normalised to the 0–1 range. A few core formulas, using Cb for backdrop and Cs for source:

multiply:    B = Cb × Cs
screen:      B = Cb + Cs − Cb × Cs
overlay:     B = hard-light(Cs, Cb)
difference:  B = |Cb − Cs|
exclusion:   B = Cb + Cs − 2 × Cb × Cs

The calculator takes 0–255 inputs, normalises to 0–1, applies the exact formula (including the piecewise soft-light and hard-light definitions and the divide-by-zero guards in color-burn/color-dodge), then scales back to 0–255. The four non-separable modes — hue, saturation, color, luminosity — recombine HSL components of the whole colour and so cannot be reduced to a single channel; the tool flags those rather than returning a wrong number.

Tips and notes

multiply always darkens, screen always lightens — white and black are their neutrals.
overlay/hard-light are the same formula with operands swapped.
Non-separable modes (hue, saturation, color, luminosity) work in HSL, not per channel.
mix-blend-mode on a non-isolate parent can blend with siblings — wrap in isolation: isolate to scope it.