Four pixel-pipelines that look alike
CSS ships four orthogonal compositing systems that beginners conflate. They read different layers and compose differently: backdrop-filter reads what is behind an element (frosted glass), filter distorts the element's own pixels (blur, brightness), mask-image multiplies an alpha map onto the element, and mix-blend-mode chooses the math used when stacking two layers.
| system | what it reads | Tailwind v4 class | cost / gotcha |
|---|---|---|---|
backdrop-filter |
the backing layer (everything painted behind this element) | backdrop-blur-md, backdrop-saturate-150 |
expensive — browser must composite the backdrop; needs a translucent bg to be visible |
filter |
the element's own pixels (and children) | blur-sm, brightness-125, grayscale |
cheap; creates a new stacking context + containing block for fixed children |
mask-image |
an alpha map (black=opaque, transparent=hidden) multiplied onto the element | mask-b-from-50%, mask-radial-from-60% |
opposite intuition to opacity: black = visible, transparent = invisible |
mix-blend-mode |
how the element's pixels combine mathematically with the backdrop | mix-blend-multiply, mix-blend-screen, bg-blend-overlay |
isolates when parent has isolate — blend stops at the isolation boundary |
1 · backdrop-filter — frosted glass over a busy image
The card below has class backdrop-blur-md and a translucent
background. The backdrop (the gradient + stripes behind it) is blurred
through the card. Without backdrop-filter, you would
just see a flat translucent rectangle — no frost.
Frosted glass
backdrop-blur-md
+ backdrop-saturate-150
blur and boost the busy gradient behind this card.
Plain translucent
Same alpha, no backdrop-*.
Notice how the stripes stay sharp through this one.
backdrop-filter: —
2 · filter — live image filters via sliders
Drag the sliders to dial in blur, brightness,
contrast, and grayscale. The JS builds a single
filter: string and applies it to the image — this is exactly
what Tailwind's blur-md brightness-125 ... classes compile to
under the hood (Tailwind stacks them into one filter declaration).
filter: none
Equivalent Tailwind classes (approx): blur-0 brightness-100
3 · mask-image — fade-out via gradient alphas
A mask multiplies an alpha map onto the element. Black = fully
visible, transparent = hidden. Tailwind v4.1 ships ergonomic utilities:
mask-b-from-50% fades the bottom half out,
mask-radial-from-60% fades from the center outward, and
arbitrary [mask-image:linear-gradient(...)] works for anything
bespoke. (CSS-level fallback: the property is also reported unprefixed by
modern browsers.)
mask-b-from-50%
mask-radial-from-60%
arbitrary [mask-image:linear-gradient(to_right,black,transparent)]
mask-image (bottom panel): —
4 · mix-blend-mode — overlapping layers, different math
mix-blend-mode decides how an element's pixels combine with
whatever is already painted behind it. multiply darkens
(good for tinting photos), screen lightens (good for glow),
difference inverts. Below, three colored circles overlap on a
dark backing — switch the blend mode to see the math change.
mix-blend-mode: screen
intent → pattern
| intent | pattern | why |
|---|---|---|
| frosted-glass card | <div class="backdrop-blur-md bg-white/10"> |
backdrop-filter blurs the backing layer; the translucent bg reveals the blur |
| saturated iOS-style glass | backdrop-blur-xl backdrop-saturate-150 backdrop-brightness-110 |
stack backdrop-* — Tailwind composes them into one backdrop-filter declaration |
| grayscale → color on hover | <img class="grayscale hover:grayscale-0 transition"> |
filter reads the image's own pixels; transition smoothly animates the value |
| fade element's bottom out | mask-b-from-50% |
v4.1 utility — linear-gradient mask, black (visible) → transparent (hidden) |
| vignette / spotlight fade | mask-radial-from-60% mask-radial-at-center |
radial-gradient mask — center visible, edges fade |
| tint a photo with a color | <div class="mix-blend-multiply bg-red-500/60"> over the image |
multiply darkens; the overlay's color multiplies with the photo's pixels |
| stop blend from bleeding past a container | add isolate on the parent |
creates an isolation boundary — children blend only among themselves |
| bespoke gradient mask | [mask-image:linear-gradient(45deg,black,transparent)] |
arbitrary value — any CSS the property accepts |