Glassmorphism CSS 生成

グラスモーフィズム（Glassmorphism）完全実装ガイド

AppleのmacOSやiOS、そしてWindows 11のFluent Designなどに採用され、現代のUIデザインにおいて不動の地位を築いた「グラスモーフィズム（Glassmorphism）」。すりガラスのような半透明の背景とぼかし効果を組み合わせることで、インターフェースに洗練された奥行きを与えます。この記事では、CSSでの正しい実装方法、ブラウザ互換性、そして美しく見せるためのデザインのコツを解説します。

グラスモーフィズムを構成する3つの必須要素

単に要素を半透明にするだけでは、すりガラスのような質感は生まれません。以下の3つのCSSプロパティを組み合わせることで初めて完成します。

1. 半透明の背景色 (`background-color`)

もっとも重要なのは背景の透明度です。rgba(255, 255, 255, 0.1) や #ffffff33 のように、透明度の高い白（ダークモードでは黒）を指定します。

2. 背景のぼかし (`backdrop-filter: blur()`)

これがグラスモーフィズムの魔法の正体です。要素の「背後」にあるものをぼかすことで、ガラスを通して見ているような屈折効果を生み出します。

3. 薄いボーダー (`border`)

ガラスの「縁（エッジ）」の反射を表現するため、1pxの非常に薄い半透明のボーダーを付与します。これがあるかないかで、立体感が劇的に変わります。

.glass-card {
  /* 1. 半透明の白い背景（透明度20%） */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. 背面のぼかし（10px） */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
  
  /* 3. ガラスの縁を表現する薄いボーダー */
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  /* 立体感を出すための軽いシャドウ */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

デザインを美しく見せるコツと注意点

アクセシビリティ（可読性）の確保

「背景が透ける」ということは、背景の色や柄によってテキストが読みにくくなるリスクがあるということです。グラスモーフィズムを使用したカード内にテキストを配置する場合は、文字のコントラスト比が十分に確保されているか確認してください。文字に軽いtext-shadowやdrop-shadowをつけると可読性が向上します。

ブラウザ互換性とフォールバック（代替手段）

現在、backdrop-filter プロパティは Chrome, Edge, Safari, Firefox のすべてのモダンブラウザでサポートされています。しかし、いくつかの注意点があります。

• Safari対応： 古いバージョンのSafariやiOSブラウザに対応させるため、必ずベンダープレフィックス -webkit-backdrop-filter を併記してください。
• Firefoxのレガシー環境： 非常に古いFirefoxではデフォルトで無効化されていましたが、最新版では完全に動作します。
• フォールバック： 万が一 backdrop-filter が効かないブラウザで閲覧された場合でも文字が読めるように、背景の透明度を少し高く設定しておく（例：0.1ではなく0.6にする）といったフォールバックを検討しましょう。代替手段として @supports クエリを使うことも有効です。

/* フォールバック用：ぼかしが効かない環境では少し濃い背景にする */
.glass-card {
  background: rgba(255, 255, 255, 0.8);
}

/* ぼかしがサポートされているブラウザのみ、透明度を下げてぼかしを適用 */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}