渐进式边缘模糊

让内容与边缘相遇的更柔和方式。

·2026年5月4日

当内容滚动到吸顶标题下方时，常规的做法是使用渐变遮罩——一层从白到透明的柔和淡出，让内容在接近顶部时逐渐变淡。

它对纯文本有效，但对任何带有色彩或细节的内容都力不从心。照片、渐变以及高饱和度的 UI 会透过这层淡出显现出来，看上去更像是被冲淡，而非柔化。

渐进式模糊淡化的是细节，而不是色彩。几层堆叠的模糊图层，每一层被遮罩限制在不同的区带内，模糊强度随着靠近边缘而增强。内容不会变淡——它会逐渐失焦，就像事物在视野边缘时那样。标题保持清爽，滚动的感觉也更为平静。

Prompt

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.

Prompt

继续探索