Polish & Effects · Small finishing touches
Progressive blur渐进模糊
- blurrier toward the edge
- soft boundary
- no hard cut
The blur is not uniform: it ramps from fully sharp at one side to fully blurred at the other, built by stacking several layers. Use it at the ends of an overflowing row or at the top and bottom edges of a scroll area — content does not get cut off, it recedes out of focus.
When to use it
Use it at the ends of an overflowing row of chips, on card lists, or as a transition between a fixed bar and the content behind it. It must be paired with a mask: without a gradient mask the edge of the blur layer is a visible straight line, uglier than no blur at all.
Parameters
5 stacked backdrop-filter layers · blur 0→8px stepped · mask-image: linear-gradient · static, no animation
Recipe
Progressive blur → 5 stacked backdrop-filter layers · blur 0→8px stepped · mask-image: linear-gradient · static, no animation
One sentence for your AI
Build a progressive blur: stack 5 backdrop-filter layers with blur values of 1, 2, 4, 6 and 8px, and give each a mask-image: linear-gradient limiting it to its own band (overlapping slightly). Together they form one continuous ramp from sharp to blurred. It is static — do not animate it. Fewer than 4 layers and the steps become visible.