40 Scroll Backdrop Blur. 40 of 95.
40/SCROLL BEHAVIOR/40 of 95
Scroll Backdrop Blur
Heavy blur during scroll destroys perceived smoothness.
The problem
A frosted navbar at full blur while content races underneath feels muddy and burns GPU — motion looks worse precisely when the eye is busiest.
The solution
On scroll, blur drops; after idle it returns to the resting frost.
Experiment
Play with the values
8px
24px
120ms
How it works
- At rest, a high backdrop blur is what makes the surface feel like glass.
- A scroll event drops the blur, because a heavy filter during motion looks like stutter.
- The idle timer is cleared on every scroll event so blur stays off while movement continues.
- After the scroll has been idle, the high blur returns.
- Motion stays crisp, and rest stays glassy.
Seen in
Frosted navbars
App chrome softens blur during fling scrolls, then re-frosts when idle.
Sticky toolbars
Editor or mail toolbars avoid expensive filters while the document flies by.
Overlay sheets
Bottom sheets reduce backdrop blur while their own scroll is active.
Dashboard headers
Analytics pages keep headers readable without constant full-blur compositing.