- backdrop-filter は「要素の後ろにある背景だけをぼかす・加工する」魔法のようなプロパティ
- backdrop-filter の基本
- 例1：背景をぼかす（最も基本の blur）
- 例2：背景を明るくする brightness()
- 例3：背景のコントラストを上げる contrast()
- 例4：複数の backdrop-filter を組み合わせる
- 例5：ナビバーに使うと「iOS風の透明バー」になる
- 例6：モーダルの背景をぼかす（UX が大きく向上）
- 例7：写真の上に文字を置くときの“読みやすさ改善”
- backdrop-filter を使うときの注意点（ここが最重要）
- 実務テンプレート：グラスモーフィズム × backdrop-filter（Tailwind）
- まとめ
backdrop-filter は「要素の後ろにある背景だけをぼかす・加工する」魔法のようなプロパティ
普通の filter は「要素そのもの」をぼかしますが、
backdrop-filter は “要素の背後にある背景” をぼかす・明るくする・コントラストを変える という特殊な効果を持っています。
グラスモーフィズムの中心技術でもあり、
モーダル・ナビバー・カード・オーバーレイなど、
“背景を活かしたデザイン” には欠かせません。
ここでは CSS と Tailwind CSS の両方で、
初心者でも理解しやすいように例題を交えて解説します。
backdrop-filter の基本
使える主な効果
- blur()：背景をぼかす
- brightness()：背景を明るくする
- contrast()：背景のコントラストを上げる
- grayscale()：背景を白黒にする
- saturate()：背景の彩度を上げる
複数組み合わせることもできます。
例1：背景をぼかす（最も基本の blur）
CSS 版
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 1.5rem;
border-radius: 1rem;
}
Tailwind 版
<div class="bg-[rgba(255,255,255,0.15)] backdrop-blur-lg p-6 rounded-xl">
背景がぼけるカード
</div>
深掘りポイント
backdrop-filter は「背景をぼかす」だけで、
要素の中身（文字や画像）はぼけません。
これが “ガラス越し” のような表現を生みます。
例2：背景を明るくする brightness()
CSS 版
.overlay {
backdrop-filter: brightness(1.4);
background: rgba(0, 0, 0, 0.3);
}
Tailwind 版
<div class="backdrop-brightness-150 bg-[rgba(0,0,0,0.3)] p-6">
背景が明るくなる
</div>
深掘りポイント
brightness は「背景の光量」を調整するため、
写真の上に文字を置くときに便利です。
例3：背景のコントラストを上げる contrast()
CSS 版
.panel {
backdrop-filter: contrast(1.8);
background: rgba(255, 255, 255, 0.1);
}
Tailwind 版
<div class="backdrop-contrast-200 bg-[rgba(255,255,255,0.1)] p-6">
背景のコントラストが強調される
</div>
深掘りポイント
contrast を使うと背景が“くっきり”するため、
暗い背景の上で使うと雰囲気が出ます。
例4：複数の backdrop-filter を組み合わせる
CSS 版
.card {
backdrop-filter: blur(16px) brightness(1.2);
background: rgba(255, 255, 255, 0.15);
}
Tailwind 版（任意値）
<div class="bg-[rgba(255,255,255,0.15)]
backdrop-blur-xl
backdrop-brightness-125
p-6 rounded-xl">
複合効果のグラスカード
</div>
深掘りポイント
blur × brightness の組み合わせは
“ガラス感” を強く出す鉄板コンビ。
例5：ナビバーに使うと「iOS風の透明バー」になる
CSS 版
.nav {
position: fixed;
top: 0;
width: 100%;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
padding: 1rem;
}
Tailwind 版
<nav class="fixed top-0 w-full bg-[rgba(255,255,255,0.2)] backdrop-blur-md p-4">
透明ナビバー
</nav>
深掘りポイント
iOS の Safari や macOS の UI のような
“透明で浮いているバー” を簡単に作れます。
例6：モーダルの背景をぼかす（UX が大きく向上）
CSS 版
.modal-bg {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(6px);
}
Tailwind 版
<div class="fixed inset-0 bg-[rgba(0,0,0,0.4)] backdrop-blur-sm"></div>
深掘りポイント
背景をぼかすと、
ユーザーの視線がモーダルに集中しやすくなります。
例7：写真の上に文字を置くときの“読みやすさ改善”
CSS 版
.text-bg {
backdrop-filter: brightness(0.6) blur(4px);
background: rgba(0,0,0,0.3);
padding: 1rem;
}
Tailwind 版
<div class="backdrop-brightness-50 backdrop-blur-sm bg-[rgba(0,0,0,0.3)] p-4 text-white">
写真の上でも読みやすい
</div>
深掘りポイント
写真の上に文字を置くと読みにくくなりがちですが、
backdrop-filter を使うと自然に読みやすくできます。
backdrop-filter を使うときの注意点（ここが最重要）
背景がないと効果が見えない
backdrop-filter は「後ろにあるもの」を加工するため、
背景が単色だと効果が分かりにくいです。
グラデーション・写真・模様と組み合わせると効果が最大化します。
透明背景が必須
background: rgba(..., 0.x) のように
半透明でないと背景が見えず、ぼかしも効きません。
影（box-shadow）と組み合わせると“浮く”
ガラス感を出すにはshadow-[...] を少し大きめに入れると効果的。
実務テンプレート：グラスモーフィズム × backdrop-filter（Tailwind）
<section class="min-h-screen flex items-center justify-center
bg-[radial-gradient(circle_at_top,#1d4ed8,#020617)] px-6">
<div class="max-w-md
bg-[rgba(255,255,255,0.12)]
border border-[rgba(255,255,255,0.3)]
rounded-3xl
backdrop-blur-2xl
shadow-[0_24px_60px_rgba(15,23,42,0.85)]
p-8 text-slate-100">
<h1 class="text-2xl font-semibold mb-3">Backdrop Filter</h1>
<p class="text-sm text-slate-200/85 mb-6">
背景をぼかしたり明るくしたりすることで、ガラスのような UI を作れます。
</p>
<button class="px-5 py-2.5 rounded-full bg-sky-500/85 hover:bg-sky-400 text-white text-sm font-medium">
アクション
</button>
</div>
</section>
まとめ
backdrop-filter は
背景をぼかす・明るくする・コントラストを変える
という、他の CSS にはない特殊な効果を持つプロパティです。
押さえるべきポイントは：
- blur() がグラスモーフィズムの中心
- brightness() や contrast() で背景を調整できる
- 背景が透明でないと効果が見えない
- Tailwind は backdrop-blur-* / backdrop-brightness-* で簡単に使える
- 写真・グラデーションと組み合わせると最大限に活きる
