CSS Difference Blend Mode

How it works

mix-blend-mode: difference subtracts each color channel of the element from the channel underneath and keeps the absolute value. White against black is 255 - 0 = 255, so the bar stays white over the stage. White against the near white letters is 255 - 240 = 15, so those letters land on black. That inversion is what reads as a spotlight passing over the type. The circles show the same arithmetic per channel, and where red overlaps green both are left high, which is a dull yellow.

The maths is per channel and nothing else. For every pixel the browser takes the backdrop value and the source value in each of red, green and blue, subtracts one from the other, and keeps the magnitude. Identical colors give zero, which is black, so anything blended over an exact copy of itself disappears. That is why the bar vanishes into the letters rather than tinting them: white over a near white glyph leaves a value of fifteen, and fifteen is essentially black.

Blending happens against the backdrop inside the current stacking context, which makes stacking the property that actually controls the effect. isolation: isolate on each stage creates a stacking context with no other side effects, so the blend can see the stage and nothing further back. Remove it and the bar starts differencing against whatever the nearest stacking context is, which on a simple page is the root, so the effect leaks across the whole document. Several other declarations create stacking contexts as a side effect, including opacity below 1, any transform, any filter, and a positioned element with a z-index, so the leak sometimes fixes itself by accident and then breaks again when one of those is removed.

The stage colors here are hard coded rather than pulled from the theme, and that is deliberate rather than an oversight. Difference operates on real channel values, so the result depends entirely on what is underneath. Under this site's light theme the page background becomes a warm off white, and a white bar differenced against it produces almost black, so the same rule would read as a dark smear instead of an inversion. Where a value has to survive a theme swap, custom properties are the tool, as in CSS dark and light mode. Where the arithmetic depends on the actual color, the value has to be pinned.

The circles use the same rule with three saturated sources over a black stage. Where none overlap, each is differenced against black, which returns the color unchanged. Where red at rgb(255, 59, 48) crosses green at rgb(52, 255, 122) the result is rgb(203, 196, 74), high in red and green and low in blue, which the eye reads as a dull yellow. The overlaps are therefore predictable rather than decorative: the technique is subtractive color mixing done live by the compositor.

There is a cost. An element with a blend mode has to be painted with knowledge of everything behind it in its group, so it cannot be handed to the compositor as an independent layer the way a plain transform can. That is fine for the two stages here. It is worth remembering before blending a dozen large elements on a page that also scrolls. CSS redacted text uses the other side of the same pipeline, filter, which processes an element on its own without needing the backdrop at all.