OnlineCBT
Distinguish filtering a box from filtering what is behind it
filter changes an element's rendered output, including its descendants. backdrop-filter affects the area behind a translucent element. A glass-like panel therefore needs both a background that allows the backdrop to show through and a useful fallback when the effect is unsupported.
.photo { filter: grayscale(1); }
.glass {
color: #0f172a;
background: rgb(255 255 255 / 0.95);
border: 1px solid #cbd5e1;
padding: 1.5rem;
}
@supports (backdrop-filter: blur(12px)) {
.glass {
background: rgb(255 255 255 / 0.8);
backdrop-filter: blur(12px);
}
}The fallback is nearly opaque and readable. The enhanced version lets the background show while blurring it. A fully opaque panel hides the backdrop, so blur may appear to do nothing.
Order and scope
Multiple filter functions compose in order. Applying blur to a card with filter also blurs its text, which is usually undesirable. A backdrop blur leaves the card's own foreground content separate from the filtered background.
Contrast and cost
Glass effects depend on the changing background. Check text over both light and dark regions and while scrolling. Large blurred surfaces can be expensive to render; measure on an ordinary mobile device instead of assuming a smooth desktop preview proves good performance.
Do not make effects essential
A photo in grayscale should retain its meaningful alternative text. A disabled control should be disabled through behavior/semantics, not merely desaturated. A missing blur should not hide content or make navigation unreadable.
Practice
- Compare filter:blur on the panel with backdrop-filter:blur.
- Disable support rules and confirm the fallback remains readable.
- Test the panel over a busy image and a plain color.
- Record scrolling performance before adding large blur radii.
