Progressive Blur

DEMO

<div class="demo-stage prb-stage">
  <div class="prb-content" aria-hidden="true">
    <span class="prb-row">MOTION LAB — SEE IT. COPY IT. BUILD IT.</span>
    <span class="prb-row">MOTION LAB — SEE IT. COPY IT. BUILD IT.</span>
    <span class="prb-row">MOTION LAB — SEE IT. COPY IT. BUILD IT.</span>
    <span class="prb-row">MOTION LAB — SEE IT. COPY IT. BUILD IT.</span>
    <span class="prb-row">MOTION LAB — SEE IT. COPY IT. BUILD IT.</span>
    <span class="prb-row">MOTION LAB — SEE IT. COPY IT. BUILD IT.</span>
  </div>
  <div class="prb-blur prb-b1" aria-hidden="true"></div>
  <div class="prb-blur prb-b2" aria-hidden="true"></div>
  <div class="prb-blur prb-b3" aria-hidden="true"></div>
  <div class="prb-blur prb-b4" aria-hidden="true"></div>
  <p class="prb-label">PROGRESSIVE BLUR</p>
</div>

.prb-stage { position:relative; display:flex; align-items:flex-end; justify-content:center; padding:0; background:linear-gradient(135deg,#2B1040 0%,#0B0B10 60%); min-height:280px; overflow:hidden; }
.prb-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:.7rem; padding:1.5rem; }
.prb-row { font-family:'Oswald',sans-serif; font-size:1.05rem; letter-spacing:.14em; color:rgba(255,255,255,.82); white-space:nowrap; }
.prb-blur { position:absolute; left:0; right:0; bottom:0; pointer-events:none; }
.prb-b1 { height:60%; backdrop-filter:blur(1px);  -webkit-backdrop-filter:blur(1px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 32%); mask-image:linear-gradient(180deg, transparent 0%, #000 32%); }
.prb-b2 { height:45%; backdrop-filter:blur(3px);  -webkit-backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 40%); mask-image:linear-gradient(180deg, transparent 0%, #000 40%); }
.prb-b3 { height:30%; backdrop-filter:blur(7px);  -webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 50%); mask-image:linear-gradient(180deg, transparent 0%, #000 50%); }
.prb-b4 { height:16%; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 60%); mask-image:linear-gradient(180deg, transparent 0%, #000 60%);
  background:linear-gradient(180deg, transparent, rgba(11,11,16,.55)); }
.prb-label { position:relative; z-index:2; padding:0 0 1.4rem; font-family:'Oswald',sans-serif; font-size:.78rem; letter-spacing:.3em; color:#fff; }
@media (prefers-reduced-motion: reduce) {
  .prb-blur { transition:none; }
}

AI PROMPT

下に向かって徐々に強くぼけていくプログレッシブブラーを作って。単一の backdrop-filter に mask を掛けても「ぼけ量そのもの」は変化しないため、ぼかし強度の違うレイヤーを複数重ねるのが正解。手順は、ぼかし 1px / 3px / 7px / 14px の4枚を position: absolute; left:0; right:0; bottom:0 で下端に固定し、高さを 60% / 45% / 30% / 16% と内側ほど小さくする。各レイヤーに mask-image: linear-gradient(180deg, transparent 0%, #000 32%〜60%) を掛けて、上端が透明・下へ行くほど不透明になるようにする。これで下へ行くほど強いぼかしが積み重なり、連続的なグラデーションブラーに見える。-webkit-backdrop-filter と -webkit-mask-image も必ず併記する。最前面のレイヤーには薄い背景色のグラデーションを重ねると、文字の可読性が上がる。全レイヤーに pointer-events: none を付けて操作を邪魔しないこと。用途は、固定ヘッダーやボトムナビの背後、スクロールコンテナの端、ヒーロー下端のフェードアウト。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。