Scroll-Triggered Blur
Scroll-Based Dynamic Blur
Scroll down to see blur intensity change
Dynamic Blur: 0px
This element's blur increases as you scroll down the page.
Create dynamic backdrop-filter blur effects that respond to scroll position.
const blurAmount = Math.min(scrollY / 10, 30);
backdrop-filter: blur(${blurAmount}px);
/* Blur intensity changes based on scroll position */Scroll down to see blur intensity change
This element's blur increases as you scroll down the page.