Reduce Edge Blur While Scrolling

·May 24, 2026

Reduce backdrop blur while the user scrolls fast. Heavy blur during motion destroys perceived smoothness and increases GPU workload. Lowering blur dynamically keeps interfaces crisp while also improving performance.

javascript

let t;
 
const nav = document.querySelector(".navbar");
window.addEventListener("scroll", () => {
	nav.style.backdropFilter = "blur(8px)";
	clearTimeout(t);
 
	t = setTimeout(() => {
		nav.style.backdropFilter = "blur(24px)";
	}, 120);
});

More Details