progressive-blur

You create a progressive blur overlay by stacking multiple CSS backdrop-filter layers and applying mask: linear-gradient(...) to each, fading the blur effect from the top or bottom edge of the viewport for soft depth.

A backdrop-filter blur looks flat when applied as a single layer instead of a progressive blur. You need layered stepped blur masks using mask gradients to build depth and fade the overlay naturally from the edge.

To stop a fixed backdrop-filter overlay from blocking button clicks, apply pointer-events: none to the overlay container, ensuring blur operates on content behind it without intercepting user interactions.

Yes, you can fade a backdrop blur from the bottom of the screen by configuring the mask: linear-gradient(...) to originate from the bottom direction, adjusting height and blur steps for the desired atmospheric effect.

The best way to add a gradient blur background for hero headers is using a layered CSS progressive blur overlay with multiple backdrop-filter layers and mask gradients, providing depth and background separation without flat edges.