progressive-blur

Stack multiple fixed-position layers, each with an increasing backdrop-filter blur value (0.5px up to 64px), and mask each layer with a linear-gradient so the blur intensifies toward one edge. The overlapping gradient stops produce a smooth stepped fade.

Use a fixed container with inset 0 0 auto 0 and a set height, then place child divs with backdrop-filter blur values masked by linear-gradient(to top, ...) stops. The snippet provides eight layers from 0.5px to 64px for a smooth fade.

backdrop-filter blurs whatever is rendered behind the element, so it has no visible effect over a flat solid background. Ensure there is actual content scrolling behind the overlay and that the browser supports backdrop-filter.

Yes, high blur values are GPU-intensive because each layer composites separately. On low-end devices, reduce the number of layers or lower the maximum blur values to limit rendering cost.

The overlay sits above content with a fixed position and z-index, so it intercepts pointer events by default. Keep pointer-events: none on the .gradient-blur container so clicks pass through to the content below.