【完全ガイド】CSS backdrop-filter を使って美しいガラスモーフィズムを実装する方法 |

ウェブデザインのトレンドとして、「ガラスモーフィズム（Glassmorphism）」 が人気を集めています。AppleやMicrosoftのデザインシステムにも採用されているこの手法は、背景をぼかし、半透明のパネルを作る ことで、モダンで洗練されたUI を実現します。

本記事では、CSSの backdrop-filter プロパティ を活用して、背景のぼかしや明度調整などのエフェクトを適用する方法を 基本から応用まで 詳しく解説します。さらに、パフォーマンスの最適化 や 実用的なデザインのカスタマイズ も紹介するので、ぜひ最後まで読んでください！

backdrop-filter とは？

backdrop-filter は、要素の背後にあるコンテンツ（背景）にフィルター効果を適用するCSSプロパティ です。

従来の filter との違い

• filter：要素自体にエフェクトを適用（例：画像をぼかす）

• backdrop-filter：要素の背後の背景にエフェクトを適用（例：背景をぼかす）

使用例

.backdrop {
  backdrop-filter: blur(10px);
}

上記のコードを適用すると、要素の背景が10pxのぼかし効果を持ちます。

backdrop-filter を使うメリット

視覚的な洗練：ぼかし効果でコンテンツの階層が明確になり、洗練されたデザインを実現

ユーザーの視線を誘導：モーダルやナビゲーションバーに適用することで、コンテンツの重要度を強調

軽量でパフォーマンスが良い：CSSのみで実装でき、JavaScriptを使用しなくても効果を適用可能

backdrop-filter の基本実装

ガラスモーフィズムのカードを作る

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ガラスモーフィズム</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="background"></div>
  <div class="glass-card">
    <h2>ガラスモーフィズム</h2>
    <p>このカードの背後にはぼかしフィルターが適用されています。</p>
  </div>
</body>
</html>

CSS

/* 背景 */
.background {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url('your-background-image.jpg') center/cover no-repeat;
  filter: brightness(0.8);
}

/* ガラス風カード */
.glass-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px); /* Safari対応 */
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

解説

背景を設定：background に画像を指定し、視認性を向上するため filter: brightness(0.8) を適用

半透明のカードを作成： background: rgba(255, 255, 255, 0.2); で透明度を調整

ぼかしエフェクトを適用： backdrop-filter: blur(15px); で背景をぼかす

Safari対応：-webkit-backdrop-filter を追加（Safariはbackdrop-filterをデフォルトでサポートしていないため）

応用編：backdrop-filter のカスタマイズ

複数のフィルターを適用

複数のフィルターを組み合わせることも可能です。

.glass-card {
  backdrop-filter: blur(15px) brightness(1.2) contrast(1.1);
}

ぼかし＋明るさ調整＋コントラスト強調 の効果を適用

クリックで動的に backdrop-filter を変更

JavaScriptを使って動的にフィルター効果を変更できます。

<button id="toggleBlur">ぼかしを切り替える</button>

document.getElementById("toggleBlur").addEventListener("click", function() {
  document.querySelector(".glass-card").classList.toggle("blur-active");
});

.blur-active {
  backdrop-filter: blur(30px);
}

ボタンをクリックするとぼかしが強くなる！

backdrop-filter のパフォーマンス最適化

backdrop-filter はGPU処理を利用するため、多用すると パフォーマンスに影響 する可能性があります。

最適化のポイント

アニメーションの使用を最小限にする（特に backdrop-filter の transition は重い）

背景画像の解像度を適切に調整する

will-change: backdrop-filter; を適用する（ただし、多用は避ける）

.glass-card {
  will-change: backdrop-filter;
}

まとめ

backdrop-filter は、要素の背後に対してぼかしやフィルター効果を適用できるCSSプロパティ

ガラスモーフィズム（Glassmorphism） を簡単に実現可能

軽量でモダンなデザインを演出できるが、パフォーマンスに注意が必要

Safariの対応には -webkit- プレフィックスが必要

(Visited 17 times, 6 visits today)

backdrop-filter とは？

backdrop-filter を使うメリット

backdrop-filter の基本実装

解説

応用編：backdrop-filter のカスタマイズ

backdrop-filter のパフォーマンス最適化

まとめ

関連投稿: