こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、CSSの backdrop-filter プロパティを使った「背景ぼかしエフェクト」の作り方についてご紹介します。
背景の奥にある要素をぼかして、手前の要素に立体感を持たせることで、UI全体がぐっと洗練されて見えるこのテクニック。
Apple系のデザインや、Glassmorphismの実装にもよく登場するこの技術は、CSSだけで実現可能です。
でも、「どこまで対応してるの？」「パフォーマンスは大丈夫？」と気になる方も多いと思いますので、実装方法・応用・注意点までしっかり解説していきます！
Backdrop-filterとは？
backdrop-filter は、要素の背景（＝背後に見えているレイヤー）に対してフィルター効果をかけるCSSプロパティです。
フィルターには主に以下のような種類があります。
- blur()：背景をぼかす
- brightness()：背景の明るさを変更
- saturate()：彩度を調整
- contrast()：コントラストを調整
- grayscale()：グレースケールに変換
中でもよく使われるのが blur() を使った背景ぼかしです。
基本のぼかしエフェクト実装
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このように、背後の画像や要素がぼやけて表示されることで、手前のカードに奥行きが生まれます。
応用：ナビゲーションバーやモーダルにも活用
backdrop-filter はカードUIだけでなく、以下のようなUIパーツでも大活躍します。- スクロールしても浮かんで見えるナビゲーションバー
- モーダルウィンドウやオーバーレイ背景
- ポップアップツールチップや通知パネル
ナビゲーション例
.navbar {
position: fixed;
top: 0;
width: 100%;
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}これで、スクロールしても背景が動き、ナビだけが浮いているような視覚効果が得られます。
対応ブラウザと注意点
backdrop-filter は非常に便利ですが、すべてのブラウザで対応しているわけではありません。- Chrome・Safari・Edge → 対応済み
- Firefox → 設定変更で有効になる（正式には非対応）
- IE → 完全に非対応
フォールバックの工夫
非対応ブラウザに備えて、ぼかしを使わず背景色やグラデーションで代替演出を行いましょう。
.overlay {
background: rgba(255, 255, 255, 0.9); /* フォールバック用 */ /* 下に対応ブラウザ向けぼかしを追加 */
backdrop-filter: blur(10px);
}CSSだけで完璧に対応はできませんが、それでも90%以上のユーザーには対応可能です。
まとめ
backdrop-filter を使えば、CSSだけで透明感・奥行き・動きのあるUIが簡単に実現できます。
- 背景をぼかすことで、前面要素を自然に際立たせる
- カード・モーダル・ナビなど多様な場面に応用可能
- Safari・Chromeでは安定して動作、Firefoxは注意
- フォールバックの工夫で広いユーザーに配慮
見た目がリッチになるだけでなく、ユーザー体験としても心地よい印象を与えられるこのテクニック。
少しのCSSで導入できますので、ぜひお試しください！
satokotadesignキャンペーン実施中！
