mix-blend-mode: difference

Type that inverts itself over anything

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.

.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