Text that inverts itself depending on what's behind it — dark on light backgrounds, light on dark backgrounds, every color in between. One CSS property does all of it.
A single piece of text that always reads correctly even as the background changes color across its width. Use it for hero headlines that sit on top of a complex image, a half-and-half split, or a colored callout — the text never needs a manual color swap because mix-blend-mode: difference picks the opposite of whatever is behind each pixel.
Set the text element's color: white and mix-blend-mode: difference. The browser blends each pixel of the text against whatever color is behind it using the "difference" formula — black on white surfaces stays black, white on dark stays white, complementary colors emerge on saturated backgrounds. Alternative blend modes give different effects: exclusion (softer than difference), multiply (always darker), screen (always lighter), overlay (contrast-aware).
The headline sits over a split background (light/dark) AND a red circle. Each letter blends against whatever's behind it. Try the other blend modes.
Build a hero where the headline auto-inverts against varied backgrounds using mix-blend-mode. Container with overflow:hidden. Inside, layer (in stacking order): (1) A "background" element split half-light (cream #FAFAF7) and half-dark (linear-gradient(135deg, #1A1814, #4a2b6a)) using pseudo-elements; (2) A large solid red #e63946 circle (320px, border-radius:50%) absolutely-positioned in the middle. (3) On top, a huge display headline with: color:white, mix-blend-mode:difference, font-size clamp(72,12vw,160px), font-weight 800, letter-spacing -0.05em. The text will automatically render dark on the light half, light on the dark half, and a complementary cyan on the red circle. Include a controls strip with toggle buttons for: difference, exclusion, multiply, screen, overlay, normal (off) — clicking each updates the headline's mix-blend-mode so users can see the difference in effect between modes. CRITICAL: the text element and background elements must share the same stacking context for blending to work correctly — usually achieved by putting them all inside one positioned container.