Filter & Backdrop-Filter Effects
Blur, saturation, blend modes — and their performance and a11y costs.
Visual DesignIntermediate
Why
backdrop-filter: blur() gives the frosted-glass look that defines modern UIs, but over-used it janks on low-end devices and can reduce text contrast below WCAG. Use deliberately, not decoratively.
Google's research shows users form a first impression in 50ms, and 75% of judgments about website credibility are based on visual aesthetics. Consistent spacing scales (8px grid) reduce cognitive load measurably.
When
Use backdrop-filter for sticky headers/overlays over varied content (where a solid bg would hide context). Skip for static surfaces — a plain color is cheaper and clearer.
How
1. backdrop-filter — filter: blur(12px) saturate(180%); needs a semi-transparent bg to show through
2. -webkit-backdrop-filter — always include the prefix; Safari still needs it
3. Performance — backdrop-filter is GPU-heavy; cap to 1–2 surfaces per screen, never on scrolling lists
4. Contrast — frosted glass over a busy photo can drop text contrast; add a text-shadow or darker bg
5. Fallback — @supports (backdrop-filter: blur(1px)) { ... } else a solid bg with higher opacity
6. Blend modes — mix-blend-mode: overlay for text-on-image; isolate the parent to contain the blend
7. Reduced transparency — @media (prefers-reduced-transparency: reduce) { backdrop-filter: none; }
Example
/* Frosted header — with prefix, fallback, and reduced-transparency guard */
.header {
background: rgb(255 255 255 / 70%); /* fallback bg, semi-transparent */
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.header { background: rgb(255 255 255 / 95%); } /* more opaque, no blur */
}
@media (prefers-reduced-transparency: reduce) {
.header { background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Blend mode — text on image, isolated */
.hero { isolation: isolate; }
.hero h1 { mix-blend-mode: overlay; color: white; }
/* Performance — don't backdrop-filter a scrolling list */
.list-item { /* backdrop-filter: blur(8px); ← DON'T, janks on scroll */ }
Common Problems
- ⚠No -webkit- prefix — Safari shows a solid bg, the frosted look vanishes for 15% of users
- ⚠backdrop-filter on every list item — GPU janks on scroll, especially low-end Android
- ⚠No reduced-transparency guard — users who disable transparency see a jarring 70%-opaque bg
Best Practices
- ✓Always include -webkit-backdrop-filter — Safari still needs the prefix
- ✓Cap to 1–2 backdrop-filter surfaces per screen — GPU cost adds up fast on scroll
- ✓Provide a solid fallback + reduced-transparency guard — usable on old browsers and for a11y