00:00
00:00
Design
@raunofreiberg
@raunofreibergProgressive Blur Edge
A softer way for content to meet the edge.
When content scrolls beneath a sticky header, the standard fix is a gradient mask — a soft white-to-transparent fade that pales the content as it nears the top.
It works on plain text. It struggles on anything with color or detail. Photos, gradients, and saturated UI bleed through the fade, looking washed out rather than soft.
A progressive blur fades the detail instead of the color. A few stacked blur layers, each masked to a different band, with blur strength increasing toward the edge. Content doesn't get paler — it gets out of focus, the way things do at the periphery of vision. The header sits clean. The scroll feels calm.
Prompt
markdown
Add a progressive blur fade at the top edge of a scrollable container, so content
softens as it approaches a sticky header instead of being faded by a flat
white-to-transparent gradient.
Implementation:
1. Inside the scroll container (which is `position: relative`), add a single
absolutely-positioned overlay sitting at the top edge. Suggested size: 80px
tall, full width, `pointer-events: none`, `z-index` above the scrolling
content but below any sticky header.
2. Inside that overlay, stack 7 sibling layers, each `position: absolute; inset: 0`.
Each layer has a `backdrop-filter: blur(Npx)` and a `mask` that confines its
blur to a horizontal band. Use these values, top to bottom:
- blur(48px) — mask 0%–25%, fully opaque 0–12.5%, fading to 0 at 25%
- blur(32px) — mask 0%–37.5%, opaque 12.5–25%
- blur(16px) — mask 12.5%–50%, opaque 25–37.5%
- blur(8px) — mask 25%–62.5%, opaque 37.5–50%
- blur(4px) — mask 37.5%–75%, opaque 50–62.5%
- blur(2px) — mask 50%–87.5%, opaque 62.5–75%
- blur(1px) — mask 62.5%–100%, opaque 75–87.5%
Mask syntax for each layer:
mask: linear-gradient(to bottom, transparent X%, black Y%, black Z%, transparent W%);
Include `-webkit-mask` with the same value for Safari.
Include `-webkit-backdrop-filter` alongside `backdrop-filter`.
3. Add one final layer on top — a soft surface-colored tint to keep any header
text readable:
background: linear-gradient(to bottom,
rgba(255,255,255,0.55) 0%,
rgba(255,255,255,0.25) 50%,
rgba(255,255,255,0) 100%);
(Swap the rgb values to match the surface color in dark mode.)
Notes:
- The scroll container must be the `backdrop-filter` reference, so it needs a
positioning context and the scroll content must sit beneath the overlay.
- Each layer blurs only its band, so the strongest blur stays at the top and
detail dissolves progressively, rather than the color simply fading.
- Don't replace this with a single large blur — the banded stack is what makes
the falloff look natural.
