ProgressiveBlur
Multi-layer edge blur — fades from full backdrop blur at one edge to clear at the opposite side.
ProgressiveBlur stacks masked backdrop-filter layers so blur strength ramps along one edge. You pick which edge starts at full blur; the overlay dissolves toward the opposite side. The root is aria-hidden — a visual scrim, not interactive chrome.
Mount it absolutely at the edge of a scroll region or over media when content should dissolve under a soft veil instead of a hard clip. The parent needs something to blur through — photos, gradients, or scrolling prose — and ProgressiveBlur itself needs a positioned size (usually a band along the edge). Keep list content and any sticky CTA above the fade layer so actions stay clickable.
Performance cost
ProgressiveBlur paints several backdrop-filter layers. Prefer one or two edge bands on a focal scroll panel. Do not stack it on every card in a dense grid.
Rounded scroll shells
Chromium drops masked backdrop blur under an ancestor that pairs overflow clipping with border-radius (Surface overflow + radius). Leave Surface overflow alone, scroll on an inner node, and set matching border-radius on the ProgressiveBlur root — layers inherit it so the veil follows the Surface corners.
When to use
- Tall scroll panels where the last (or first) lines should soften under chrome or a CTA
- Media or reader sheets that need a soft veil instead of a hard clip
- Dual bands when both header and footer chrome sit over scrolling content
When not to use
- Film grain or turbulence texture → StaticNoise
- A hard mask or overflow clip with no blur ramp
- Stacking edge bands on every card in a dense grid
Related
- StaticNoise — SVG grain overlay on surfaces and heroes
- Surface — scroll panel and overflow shell
Common examples
Bottom edge fade
A tall scroll article with images is the usual ProgressiveBlur composition. Keep the blur band inside the scrollport (sticky zero-height shell + 100cqb viewport) so the scrollbar stays sharp, match the Surface radius token on the blur root, pad the scroll content so the last lines can travel under the veil, and keep the footer CTA above in z-order.
direction="bottom" is the default — set it only when the code should read the edge explicitly.
Top edge under chrome
Flip the band to direction="top" when sticky title chrome should stay sharp while scrolling content softens underneath. Keep the blur inside the scrollport with the same sticky zero-height shell so the scrollbar stays sharp, and match the top Surface corners on the blur root. ProgressiveBlur has no tint prop — layer a fading background on the same band to darken the backdrop under the blur. Pad the scroll content so the first lines sit past the strong end of the veil without leaving a large empty gap.
Dual-edge bands
Top and bottom bands together suit a sheet-style reader: content softens under both the header and the footer action without clipping. Mount both bands in the same sticky scrollport shell so neither covers the scrollbar. Reuse the tinted top band as the sticky-chrome example and match each edge’s corner radius on the blur roots.
Tune blur when the veil feels too soft or too heavy; reach for easing or steps only when banding shows at the defaults.
ProgressiveBlur is decorative only — accessible names and actions live on the content and chrome above it, not on the scrim.
Ask your agent
Soften the bottom edge of this tall scrollable article so the last lines dissolve under a Continue reading button. Keep the button clickable above the fade.Last updated on