Type that inverts itself over anything

Q: Why does text with mix-blend-mode difference disappear on grey?

Difference subtracts per channel, so white text over #808080 comes out as #7f7f7f, almost the same grey. No blend mode fixes that; keep the backdrop out of the middle tones, or add a subtle shadow or outline that survives the blend.

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

background-blend-mode blends an element's own background layers (images, gradients and background colour) with each other. mix-blend-mode blends the whole rendered element, text included, with whatever is painted behind it, which is the one inverting type needs.

Live demo

Both halves

Caveat and fallback

CaveatBlending only reaches as far as the nearest ancestor that forms an isolated group, and an opacity below 1, a transform, a filter, will-change or position: fixed quietly creates one — so the text inverts against a backdrop that is not the one on screen, and nothing in the styles says why. isolation: isolate is that same mechanism used on purpose: it pins the blend to a box you chose. The second trap is arithmetic, not support: difference against a mid grey returns another mid grey, so the type vanishes exactly where the backdrop is neither light nor dark.

FallbackSupport is universal, so the case to plan for is forced-colors mode, which drops the blend and repaints the text in the system pair — readable, unstyled, and the right outcome to leave alone. The one to avoid is a fallback color of white with no blend: it survives the dark half and disappears on the light one.

Source code

CSS

.band {
  /* or the blend reads the page
     behind this box, not the box */
  isolation: isolate;
}

.band h2 {
  color: #fff;
  /* white minus backdrop =
     backdrop inverted */
  mix-blend-mode: difference;
}

Published 28 Aug 2026

Questions

Why is mix-blend-mode not working on my text?

Usually the text is blending inside a group that has nothing painted in it. An ancestor with opacity, a transform or a filter isolates the blend from the page, and a transparent backdrop gives difference nothing to invert. Put the background on the isolated box itself, or on the page.

Why does text with mix-blend-mode difference disappear on grey?

Difference subtracts per channel, so white text over #808080 comes out as #7f7f7f, almost the same grey. No blend mode fixes that; keep the backdrop out of the middle tones, or add a subtle shadow or outline that survives the blend.

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

background-blend-mode blends an element's own background layers (images, gradients and background colour) with each other. mix-blend-mode blends the whole rendered element, text included, with whatever is painted behind it, which is the one inverting type needs.