プログレッシブブラー（端のぼかしフェード）

scroll

progressive blur / gradient blur

スクロール領域の端へ向かってぼかしが段々強くなる帯を敷き、内容をそこへ溶かして消す処理。ぼかし量の違う層をグラデーションマスクで重ねるのが要点で、不透明グラデーションで覆うだけの処理より奥行きが出る。

01 — Demo video

Play live →

02 — Prompt template

スクロール領域に progressive blur（端のぼかしフェード）を実装してください。

- スクロール領域の {{edge}} 側に、高さ {{height}}% の帯を position: absolute で重ねる（pointer-events: none）
- 帯の中に {{layers}} 枚の層を並べ、各層に backdrop-filter: blur() を掛ける
- ぼかし量は内側の層から端の層へ向かって増やし、最も端の層を {{maxBlur}}px にする
- 各層に mask-image: linear-gradient() を掛け、内側を transparent・端側を不透明にする。開始位置は層ごとに 1/層数 ずつ端へ寄せる（層が重なることでぼかしが端に向かって累積する）
- 単色のグラデーションで覆うだけにしない（ぼかしが無いと奥行きが出ない）。可読性のために背景色へのグラデーション（scrim）を併用してよい
- backdrop-filter は -webkit- 付きも併記し、@supports not (backdrop-filter: blur(1px)) では背景色グラデーションのみにフォールバックする
- 帯は「その方向にまだスクロールできるとき」だけ表示し、端まで来たら opacity で消す。切り替えは transform / opacity のみで行い、レイアウトを触らない
- prefers-reduced-motion: reduce のときは帯の出し入れのトランジションを 0s にして即時切り替えにする（段階ぼかし自体は静的な表現なので残す）

スクロール領域に progressive blur（端のぼかしフェード）を実装してください。

- スクロール領域の {{edge}} 側に、高さ {{height}}% の帯を position: absolute で重ねる（pointer-events: none）
- 帯の中に {{layers}} 枚の層を並べ、各層に backdrop-filter: blur() を掛ける
- ぼかし量は内側の層から端の層へ向かって増やし、最も端の層を {{maxBlur}}px にする
- 各層に mask-image: linear-gradient() を掛け、内側を transparent・端側を不透明にする。開始位置は層ごとに 1/層数 ずつ端へ寄せる（層が重なることでぼかしが端に向かって累積する）
- 単色のグラデーションで覆うだけにしない（ぼかしが無いと奥行きが出ない）。可読性のために背景色へのグラデーション（scrim）を併用してよい
- backdrop-filter は -webkit- 付きも併記し、@supports not (backdrop-filter: blur(1px)) では背景色グラデーションのみにフォールバックする
- 帯は「その方向にまだスクロールできるとき」だけ表示し、端まで来たら opacity で消す。切り替えは transform / opacity のみで行い、レイアウトを触らない
- prefers-reduced-motion: reduce のときは帯の出し入れのトランジションを 0s にして即時切り替えにする（段階ぼかし自体は静的な表現なので残す）

スクロール領域に progressive blur（端のぼかしフェード）を実装してください。

- スクロール領域の {{edge}} 側に、高さ {{height}}% の帯を position: absolute で重ねる（pointer-events: none）
- 帯の中に {{layers}} 枚の層を並べ、各層に backdrop-filter: blur() を掛ける
- ぼかし量は内側の層から端の層へ向かって増やし、最も端の層を {{maxBlur}}px にする
- 各層に mask-image: linear-gradient() を掛け、内側を transparent・端側を不透明にする。開始位置は層ごとに 1/層数 ずつ端へ寄せる（層が重なることでぼかしが端に向かって累積する）
- 単色のグラデーションで覆うだけにしない（ぼかしが無いと奥行きが出ない）。可読性のために背景色へのグラデーション（scrim）を併用してよい
- backdrop-filter は -webkit- 付きも併記し、@supports not (backdrop-filter: blur(1px)) では背景色グラデーションのみにフォールバックする
- 帯は「その方向にまだスクロールできるとき」だけ表示し、端まで来たら opacity で消す。切り替えは transform / opacity のみで行い、レイアウトを触らない
- prefers-reduced-motion: reduce のときは帯の出し入れのトランジションを 0s にして即時切り替えにする（段階ぼかし自体は静的な表現なので残す）

03 — Params

layers(重ねる層の数) — 範囲 2〜6 / 初期 4
3〜4層で段差はほぼ見えなくなる。backdrop-filterのコストは層数に比例するので増やしすぎない。
maxBlur(端のぼかし量 px) — 範囲 4〜40 / 初期 20
最も端の層のぼかし量。16〜24pxが目安。40px近くまで上げると帯そのものが主張し始める。
height(帯の高さ %) — 範囲 12〜60 / 初期 34
領域の高さに対する帯の割合。30%前後が自然。広げすぎると素で読める範囲が減る。
edge(ぼかす端) — 選択: bottom / top（初期: bottom）
下端は「まだ続きがある」の合図、上端は固定ヘッダーの下敷きに使う。

04 — Vocab

backdrop-filter — 要素の「背後にあるもの」に掛けるフィルター。filterと違い自分自身は加工しないので、上に乗せた文字は鮮明なまま背景だけぼかせる。
mask-image — 要素の見える範囲を画像やグラデーションの不透明度で決めるプロパティ。linear-gradientを渡すと「どこから効かせるか」を連続的に指定できる。
段階ぼかし（layered blur） — ぼかし量の違う層をマスクをずらして重ね、端に向かってぼかしを累積させる手法。1枚では作れない滑らかなぼかしの勾配が出る。
scrim — 可読性を確保するために敷く半透明の覆い。ぼかしだけでは輝度が残るため、背景色へのグラデーションを添えて完全に溶かす。
スクロールアフォーダンス — 「まだ続きがある」ことを見せる手掛かり。端がぼけて切れていると続きの存在が伝わり、端まで来て消えると終端が伝わる。

05 — NG → OK examples

言い方: 「「リストの下を自然にフェードアウトさせて」」

なぜNG: 背景色のlinear-gradientを1枚重ねただけの実装が返ってくる。文字が「ベタ塗りに隠れた」ようになり、ぼかし特有の奥行きが出ない。層数・ぼかし量・帯の高さも決まらない。

言い方: 「「progressive blurで下端をぼかす。backdrop-filter: blurの層を4枚重ね、mask-image: linear-gradientで内側transparent→端側不透明、開始位置を層ごとに25%ずつ下へ。端の層は20px、帯の高さは34%。下にスクロールできる間だけ表示し、prefers-reduced-motion時はトランジションなし」」

なぜOK: 「層を重ねてマスクをずらす」という実装方式そのものを指定しているので、1枚グラデーションに落ちない。層数・ぼかし量・帯の高さ・表示条件・reduced-motionまで数値と条件で確定している。