バックドロップフィルターとグラスモーフィズム
問題
グラスモーフィズム（glassmorphism）は、AppleのiOSやmacOSで広まったすりガラス風の美しいデザインで、backdrop-filter: blur() と半透明の背景を組み合わせて実現します。AIエージェントはこの実装でよく間違いを犯します。要素自体にブラーをかけてしまう、完全に不透明な背景を使ってブラー効果を隠してしまう、Safariに必要な -webkit- プレフィックスを忘れる、あるいはブラーすべき視覚的なコンテンツがない単色背景の上にエフェクトを適用してしまう、といったケースです。
解決方法
視覚的にリッチな背景（グラデーション、画像、カラフルなコンテンツ）の上に配置した半透明の要素に backdrop-filter: blur() を使用します。ブラーは要素自体のコンテンツではなく、要素の背後にあるものに対して適用されます。ブラー値は見た目とパフォーマンスのバランスが最も良い8〜16pxの範囲にしましょう。Safariとの互換性のために、常に -webkit- プレフィックスを含めてください。
基本原則
半透明の背景が必要
要素には半透明の background-color が必要です。そうすることでブラーされた背景が透けて見えます。完全に不透明な背景を設定すると、グラスモーフィズムの目的そのものが台無しになります。
背後にリッチなコンテンツが必要
backdrop-filter は要素の背後にあるものをブラーします。単色の白い背景の上では、ブラーするものがないためエフェクトは見えません。グラスモーフィズムは常にグラデーション、画像、カラフルなレイヤードコンテンツの上で使いましょう。
パフォーマンスの考慮
グラスモーフィズム要素はそれぞれGPUでのブラー計算を発生させます。1つのビューポートにつきガラス要素は2〜3個に制限しましょう。backdrop-filter の値を直接アニメーションすることは避けてください。
コード例
基本的なすりガラスカード
.glass-card {
background: hsl(0deg 0% 100% / 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid hsl(0deg 0% 100% / 0.2);
border-radius: 16px;
padding: 24px;
}
<div class="vibrant-background">
<div class="glass-card">
<h2>Frosted Glass</h2>
<p>Content is readable over a blurred background.</p>
</div>
</div>
鮮やかな背景の設定
ガラスエフェクトは背後にリッチな視覚コンテンツがある場合にのみ機能します。
.vibrant-background {
min-height: 100vh;
background:
radial-gradient(circle at 20% 80%, hsl(280deg 80% 60% / 0.6), transparent 50%),
radial-gradient(circle at 80% 20%, hsl(200deg 80% 60% / 0.6), transparent 50%),
linear-gradient(135deg, hsl(220deg 60% 20%), hsl(280deg 60% 30%));
display: grid;
place-items: center;
padding: 40px;
}
ダークテーマのグラスモーフィズム
.glass-dark {
background: hsl(220deg 20% 10% / 0.4);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid hsl(0deg 0% 100% / 0.08);
border-radius: 12px;
box-shadow: 0 8px 32px hsl(0deg 0% 0% / 0.3);
}
ライトテーマのグラスモーフィズム
.glass-light {
background: hsl(0deg 0% 100% / 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid hsl(0deg 0% 100% / 0.3);
border-radius: 12px;
box-shadow: 0 4px 16px hsl(0deg 0% 0% / 0.08);
}
すりガラスのナビゲーションバー
.glass-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: hsl(0deg 0% 100% / 0.7);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border-bottom: 1px solid hsl(0deg 0% 0% / 0.06);
padding: 12px 24px;
}
blur() と合わせて saturate(180%) を追加すると、ブラーされたコンテンツの色が強調され、Appleのガラスエフェクトのような鮮やかさを再現できます。
ガラスモーダルオーバーレイ
.glass-overlay {
position: fixed;
inset: 0;
background: hsl(0deg 0% 0% / 0.3);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: grid;
place-items: center;
z-index: 200;
}
.glass-modal {
background: hsl(0deg 0% 100% / 0.2);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid hsl(0deg 0% 100% / 0.15);
border-radius: 20px;
padding: 32px;
max-width: 500px;
width: 90%;
box-shadow: 0 16px 48px hsl(0deg 0% 0% / 0.2);
}
<div class="glass-overlay">
<div class="glass-modal">
<h2>Modal Title</h2>
<p>Modal content over a frosted backdrop.</p>
</div>
</div>
事前ブラー画像によるパフォーマンス重視の代替手法
パフォーマンスが重要な場合（モバイル端末やガラス要素が多い場合）は、ランタイムの backdrop-filter の代わりに事前にブラーした画像を使いましょう。
.faux-glass {
position: relative;
overflow: hidden;
border-radius: 16px;
}
.faux-glass::before {
content: "";
position: absolute;
inset: -20px;
background: url("background-preblurred.jpg") center / cover;
filter: blur(0); /* image is already blurred */
z-index: -1;
}
.faux-glass-content {
position: relative;
background: hsl(0deg 0% 100% / 0.15);
padding: 24px;
}
ライブプレビュー
AIがよくやるミス
backdrop-filter: blur()の代わりにfilter: blur()を使ってしまう —filterは要素自体とそのすべてのコンテンツをブラーするため、テキストが読めなくなります。backdrop-filterは要素の背後にあるものだけをブラーします。- 完全に不透明な背景を使う —
background: whiteやbackground: rgba(255, 255, 255, 1)を設定すると、ブラーされた背景が完全に覆い隠され、エフェクトが見えなくなります。 -webkit-プレフィックスを忘れる — Safariでは標準のbackdrop-filterに加えて-webkit-backdrop-filterが必要です。これがないと、Safariユーザーにはブラーが表示されません。- 単色背景の上に適用する — 単一の平坦な色の上にガラスエフェクトを置いても、目に見える効果は得られません。ブラーが意味を持つには、要素の背後に視覚的な変化がなければなりません。
- ガラス要素が多すぎる — 各
backdrop-filterはGPUによるコストの高いブラー処理を発生させます。すべてのカード、ボタン、ナビゲーション項目に使用すると、深刻なフレーム落ちを引き起こします。 - 過度なブラー値 —
blur(40px)やそれ以上の値を使用すること。16pxを超える値は指数関数的にコストが増加し、12〜16pxより見た目が良くなることはほとんどありません。 - ライトテーマとダークテーマで調整しない — ダーク背景に合わせたガラスエフェクトはライト背景では色あせて見え、その逆も同様です。背景の不透明度とボーダーにはテーマごとの調整が必要です。
使い分け
- ページコンテンツの上をスクロールする固定ナビゲーションバー
- 下のページのコンテキストを維持する必要があるモーダルオーバーレイ
- 鮮やかな画像やグラデーションの上に配置されたヒーローセクションのカードやオーバーレイ
- リッチなビジュアルコンテンツの上にあるアプリケーションのサイドバーパネル
- 空間的なコンテキストの維持が重要なツールチップやポップオーバー要素
Tailwind CSS
Tailwindは、カスタムCSSを書かずにグラスモーフィズム効果を実現するための backdrop-blur-*、backdrop-brightness-*、backdrop-saturate-* ユーティリティを提供しています。