amw-progressive-blur

Install progressive-blur and render the LinearBlur component as an absolutely positioned overlay over the scroll area. Set side to the edge where blur is strongest, then tune strength, steps, and falloffPercentage; pointer-events is already disabled so clicks pass through.

LinearBlur creates a one-axis gradient blur strongest at the edge named by its side prop, fading toward the opposite edge. RadialBlur creates a center-out radial gradient where blur is strongest at the center and clears toward the nearest edge.

Use plain CSS filter or backdrop-filter blur when you need one uniform blur over an entire box. Use progressive-blur only when you need a gradient blur that ramps from clear to blurred, such as a fade-to-blur sticky header edge.

Chrome bug Chromium #40778541 breaks masked backdrop-filter rendering when an ancestor has both overflow:hidden and border-radius. Move the rounding and clipping to different elements, or skip the border-radius in Chrome; it is a browser limitation, not a configuration error.

Banding means the steps prop is too low for the band size, since the component stacks discrete masked blur layers. Raise steps to increase gradient resolution until the banding disappears, accepting higher GPU cost.

No, it is a React component requiring react and react-dom ^18.2.0 as peer dependencies. It relies on CSS backdrop-filter and mask, so on browsers without backdrop-filter support the effect degrades gracefully to no blur.