Web Design Lab ← ギャラリーへ
背景 & グラデーション 中級

プログレッシブブラー

下端に向かって段階的に強くぼかす backdrop-filter 層を mask グラデで重ね、写真の上に置いた固定ナビと見出しの可読性を高める手法。Apple/iOS 風の上品なフェードブラーで、ヒーローやアプリUIに使えます。

#background#blur#backdrop-filter#trend

ライブデモ

使用例（お題: カフェ MOON BREW）

この技法を「カフェ MOON BREW」というテーマのダミーサイトで実際に使った例です。

HTML 
<!-- MOON BREW：店内写真の上、下端をプログレッシブブラーで可読化 -->
<section class="pb-hero">
  <!-- 背景：カフェの店内写真 -->
  <img class="pb-photo" src="https://picsum.photos/900/600?random=91" alt="MOON BREW 店内">

  <!-- ★主役：下端ほど強くボカす段階的 backdrop-filter 層 -->
  <div class="pb-blur pb-blur-1" aria-hidden="true"></div>
  <div class="pb-blur pb-blur-2" aria-hidden="true"></div>
  <div class="pb-blur pb-blur-3" aria-hidden="true"></div>
  <div class="pb-blur pb-blur-4" aria-hidden="true"></div>
  <div class="pb-scrim" aria-hidden="true"></div>

  <!-- 固定ナビ -->
  <header class="pb-nav">
    <div class="pb-logo">☕ MOON <span>BREW</span></div>
    <nav class="pb-links">
      <a href="#">メニュー</a>
      <a href="#">豆を買う</a>
      <a href="#">店舗</a>
    </nav>
  </header>

  <!-- 下端ヒーロー -->
  <div class="pb-copy">
    <span class="pb-eyebrow">SINCE 2014 ・ 自家焙煎</span>
    <h1 class="pb-title">ゆっくり流れる、<br>珈琲の時間。</h1>
    <p class="pb-sub">朝7時から夜9時まで。深煎りの香りに包まれる、街角の小さな焙煎所。</p>
    <button class="pb-btn" type="button">本日のメニュー</button>
  </div>
</section>
CSS 
/* MOON BREW：店内写真の下端をプログレッシブブラーで段階的にボカす */
* { box-sizing: border-box; margin: 0; padding: 0; }

.pb-hero {
  position: relative;
  min-height: 400px;
  height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: #2b1d12; /* 画像読込前の下地 */
  font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif;
}

/* 背景写真 */
.pb-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ブラー層共通: maskで効かせる範囲を帯状に限定 */
.pb-blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent var(--from), #000 var(--to));
          mask-image: linear-gradient(to bottom, transparent 0%, transparent var(--from), #000 var(--to));
}
/* ★主役：4段階で下に向かうほど blur を強める */
.pb-blur-1 { --from: 30%; --to: 50%; -webkit-backdrop-filter: blur(2px);  backdrop-filter: blur(2px);  }
.pb-blur-2 { --from: 45%; --to: 62%; -webkit-backdrop-filter: blur(5px);  backdrop-filter: blur(5px);  }
.pb-blur-3 { --from: 60%; --to: 76%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pb-blur-4 { --from: 74%; --to: 90%; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* 暗幕（琥珀寄り）：下端を暗くして白文字を守る */
.pb-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(43,29,18,0.4) 0%,
    rgba(43,29,18,0) 28%,
    rgba(43,29,18,0) 50%,
    rgba(43,29,18,0.72) 100%
  );
}

/* 固定ナビ */
.pb-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}
.pb-logo {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.pb-logo span { color: #e6b877; }
.pb-links { display: flex; gap: 18px; }
.pb-links a {
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 13px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  transition: color 0.2s ease;
}
.pb-links a:hover { color: #e6b877; }

/* 下端コピー（一番ボケる帯の上） */
.pb-copy {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding: 0 26px 26px;
  max-width: 520px;
}
.pb-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #f0cf9e;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.pb-title {
  margin-top: 8px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.pb-sub {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.pb-btn {
  margin-top: 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #2b1d12;
  background: linear-gradient(135deg, #e6b877, #c98a3b);
  border: none;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.pb-btn:hover { transform: translateY(-2px); }
.pb-btn:active { transform: scale(0.97); }

/* backdrop-filter 非対応時は暗幕を強めて可読性を維持 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pb-scrim {
    background: linear-gradient(
      to bottom,
      rgba(43,29,18,0.45) 0%,
      rgba(43,29,18,0.1) 35%,
      rgba(43,29,18,0.45) 60%,
      rgba(43,29,18,0.85) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .pb-btn, .pb-links a { transition: none; }
}
JavaScript 
// メニューCTAの軽い反応（プログレッシブブラーはCSSが主役）
(() => {
  const btn = document.querySelector(".pb-btn");
  if (!btn) return; // null安全

  btn.addEventListener("click", () => {
    const label = btn.textContent;
    btn.textContent = "本日のおすすめ：琥珀ハニーラテ";
    setTimeout(() => { btn.textContent = label; }, 1800);
  });
})();

コード

HTML 
<!-- プログレッシブブラー: 背景写真の下端へ向け段階的にボケる層を重ね、見出し/ナビの可読性を上げる -->
<div class="pb-stage">
  <!-- 背景写真（picsum） -->
  <img class="pb-photo" src="https://picsum.photos/id/1018/800/500" alt="" loading="lazy" decoding="async" />

  <!-- 段階的ブラー層: 各層で blur を強め mask で帯状に効かせる（下ほど強く） -->
  <div class="pb-blur pb-blur-1" aria-hidden="true"></div>
  <div class="pb-blur pb-blur-2" aria-hidden="true"></div>
  <div class="pb-blur pb-blur-3" aria-hidden="true"></div>
  <div class="pb-blur pb-blur-4" aria-hidden="true"></div>
  <!-- 暗幕グラデで文字コントラストを底上げ（フォールバックも兼ねる） -->
  <div class="pb-scrim" aria-hidden="true"></div>

  <!-- 前景UI -->
  <header class="pb-nav">
    <span class="pb-logo">Aurora<span>App</span></span>
    <nav class="pb-links">
      <a href="#">機能</a>
      <a href="#">料金</a>
      <a href="#">事例</a>
    </nav>
  </header>

  <div class="pb-hero">
    <p class="pb-eyebrow">2026 TREND</p>
    <h1 class="pb-title">下端に溶けるブラー</h1>
    <p class="pb-sub">背景が下に向かって滑らかにボケるので、写真の上でも文字がくっきり読めます。</p>
  </div>
</div>
CSS 
/* プログレッシブブラー: blur量の異なる backdrop-filter 層を mask グラデで帯状に重ね、下端ほど強くボカす */
* { box-sizing: border-box; margin: 0; padding: 0; }

.pb-stage {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
  color: #fff;
  background: #0b1120; /* 画像読込前/失敗時の下地 */
}

/* 背景写真は全面に敷く */
.pb-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ブラー層共通: 全面に重ね、mask で効かせる範囲を限定する */
.pb-blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 下端ほど不透明=ボケが強い帯。上端は透明でくっきり残す */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent var(--from), #000 var(--to));
          mask-image: linear-gradient(to bottom, transparent 0%, transparent var(--from), #000 var(--to));
}

/* 4段階: 下に向かうほど blur を強め、開始位置(--from)を下げて積層 */
.pb-blur-1 { --from: 30%; --to: 50%; -webkit-backdrop-filter: blur(2px);  backdrop-filter: blur(2px);  }
.pb-blur-2 { --from: 45%; --to: 62%; -webkit-backdrop-filter: blur(5px);  backdrop-filter: blur(5px);  }
.pb-blur-3 { --from: 60%; --to: 76%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pb-blur-4 { --from: 74%; --to: 90%; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* 暗幕: 下端を暗くして白文字のコントラストを確保（backdrop-filter非対応でも可読性維持） */
.pb-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(8, 12, 26, 0.45) 0%,
    rgba(8, 12, 26, 0) 28%,
    rgba(8, 12, 26, 0) 52%,
    rgba(8, 12, 26, 0.55) 100%
  );
}

/* 上部ナビ */
.pb-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
}

.pb-logo {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.pb-logo span { color: #7fd0ff; }

.pb-links {
  display: flex;
  gap: 18px;
}
.pb-links a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 13px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s ease;
}
.pb-links a:hover { opacity: 0.65; }

/* 下部ヒーロー: 一番ボケる帯の上に固定的に置く */
.pb-hero {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding: 0 26px 30px;
  max-width: 560px;
}

.pb-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #9bdcff;
  margin-bottom: 8px;
}

.pb-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.pb-sub {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* backdrop-filter 非対応ブラウザ向けフォールバック:
   ブラー層が無効でも、暗幕を少し強めて文字を守る */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pb-scrim {
    background: linear-gradient(
      to bottom,
      rgba(8, 12, 26, 0.5) 0%,
      rgba(8, 12, 26, 0.1) 35%,
      rgba(8, 12, 26, 0.45) 60%,
      rgba(8, 12, 26, 0.82) 100%
    );
  }
}
JavaScript 
// プログレッシブブラーは CSS のみで完結（JS不要）

🤖 AIエージェント用プロンプト

このままコピーしてAIに貼り付け「追加する場所」だけ書き換えればOK
あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「プログレッシブブラー」の効果を追加してください。

# 追加してほしい効果
プログレッシブブラー（背景 & グラデーション）
下端に向かって段階的に強くぼかす backdrop-filter 層を mask グラデで重ね、写真の上に置いた固定ナビと見出しの可読性を高める手法。Apple/iOS 風の上品なフェードブラーで、ヒーローやアプリUIに使えます。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- プログレッシブブラー: 背景写真の下端へ向け段階的にボケる層を重ね、見出し/ナビの可読性を上げる -->
<div class="pb-stage">
  <!-- 背景写真（picsum） -->
  <img class="pb-photo" src="https://picsum.photos/id/1018/800/500" alt="" loading="lazy" decoding="async" />

  <!-- 段階的ブラー層: 各層で blur を強め mask で帯状に効かせる（下ほど強く） -->
  <div class="pb-blur pb-blur-1" aria-hidden="true"></div>
  <div class="pb-blur pb-blur-2" aria-hidden="true"></div>
  <div class="pb-blur pb-blur-3" aria-hidden="true"></div>
  <div class="pb-blur pb-blur-4" aria-hidden="true"></div>
  <!-- 暗幕グラデで文字コントラストを底上げ（フォールバックも兼ねる） -->
  <div class="pb-scrim" aria-hidden="true"></div>

  <!-- 前景UI -->
  <header class="pb-nav">
    <span class="pb-logo">Aurora<span>App</span></span>
    <nav class="pb-links">
      <a href="#">機能</a>
      <a href="#">料金</a>
      <a href="#">事例</a>
    </nav>
  </header>

  <div class="pb-hero">
    <p class="pb-eyebrow">2026 TREND</p>
    <h1 class="pb-title">下端に溶けるブラー</h1>
    <p class="pb-sub">背景が下に向かって滑らかにボケるので、写真の上でも文字がくっきり読めます。</p>
  </div>
</div>

【CSS】
/* プログレッシブブラー: blur量の異なる backdrop-filter 層を mask グラデで帯状に重ね、下端ほど強くボカす */
* { box-sizing: border-box; margin: 0; padding: 0; }

.pb-stage {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
  color: #fff;
  background: #0b1120; /* 画像読込前/失敗時の下地 */
}

/* 背景写真は全面に敷く */
.pb-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ブラー層共通: 全面に重ね、mask で効かせる範囲を限定する */
.pb-blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 下端ほど不透明=ボケが強い帯。上端は透明でくっきり残す */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent var(--from), #000 var(--to));
          mask-image: linear-gradient(to bottom, transparent 0%, transparent var(--from), #000 var(--to));
}

/* 4段階: 下に向かうほど blur を強め、開始位置(--from)を下げて積層 */
.pb-blur-1 { --from: 30%; --to: 50%; -webkit-backdrop-filter: blur(2px);  backdrop-filter: blur(2px);  }
.pb-blur-2 { --from: 45%; --to: 62%; -webkit-backdrop-filter: blur(5px);  backdrop-filter: blur(5px);  }
.pb-blur-3 { --from: 60%; --to: 76%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pb-blur-4 { --from: 74%; --to: 90%; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* 暗幕: 下端を暗くして白文字のコントラストを確保（backdrop-filter非対応でも可読性維持） */
.pb-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(8, 12, 26, 0.45) 0%,
    rgba(8, 12, 26, 0) 28%,
    rgba(8, 12, 26, 0) 52%,
    rgba(8, 12, 26, 0.55) 100%
  );
}

/* 上部ナビ */
.pb-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
}

.pb-logo {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.pb-logo span { color: #7fd0ff; }

.pb-links {
  display: flex;
  gap: 18px;
}
.pb-links a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 13px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s ease;
}
.pb-links a:hover { opacity: 0.65; }

/* 下部ヒーロー: 一番ボケる帯の上に固定的に置く */
.pb-hero {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding: 0 26px 30px;
  max-width: 560px;
}

.pb-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #9bdcff;
  margin-bottom: 8px;
}

.pb-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.pb-sub {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* backdrop-filter 非対応ブラウザ向けフォールバック:
   ブラー層が無効でも、暗幕を少し強めて文字を守る */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pb-scrim {
    background: linear-gradient(
      to bottom,
      rgba(8, 12, 26, 0.5) 0%,
      rgba(8, 12, 26, 0.1) 35%,
      rgba(8, 12, 26, 0.45) 60%,
      rgba(8, 12, 26, 0.82) 100%
    );
  }
}

【JavaScript】
// プログレッシブブラーは CSS のみで完結（JS不要）

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。
背景 & グラデーション
アニメーショングラデーション
background-position をアニメーションさせ、4色のグラデーションが無限にループする背景。ヒーローセクションやランディングページの土台に使えます。
背景 & グラデーション
メッシュグラデーション
複数の radial-gradient を重ねて有機的な色面を作り、JSで各色溜まりを漂わせるメッシュ背景。SaaSやポートフォリオのヒーローに最適です。
背景 & グラデーション
SVGノイズ質感
feTurbulence で生成した粒状ノイズをグラデーションに重ね、上質なマット質感を演出。ボタンでノイズの粗さを切り替えられます。
背景 & グラデーション
動く幾何学パターン
canvas で三角格子を描き、サイン波に沿って各点を明滅させる動的背景。テック系のLPやダッシュボードの背景に使えます。
背景 & グラデーション
オーロラ光背景
ぼかした光の帯をゆっくり揺らし、星空とともに夜空のオーロラを再現するCSS背景。ダークテーマのヒーローに映えます。
背景 & グラデーション
ドット/グリッド背景
CSSのドット格子にマウス追従のスポットライトを重ねた背景。マスクで照らした部分だけドットを濃く見せます。ダッシュボード向け。
背景 & グラデーション
回転グラデーションボーダー
@property で角度を回転させた conic-gradient のボーダーがカードの縁を発光させる演出。価格表やバッジカードに使えます。
背景 & グラデーション
blobモーフィング
JSで制御点の半径を補間し、SVGパスを滑らかに変形させる有機的な背景。遊び心のあるLPの主役背景になります。