ガラスのような透明感「グラスモーフィズム」

このページの目的

背景がすりガラスのように透けて見える、美しい「グラスモーフィズム」というデザインエフェクトの実装方法を学びます。
backdrop-filterプロパティを使い、カードやサイドバーなどに、モダンで洗練された透明感を与えることが目標です。

smart_display動作サンプル

実際に動作するサンプルです。半透明のカードの下にある背景が、すりガラスのようにぼやけて見えることを確認してください。

このサンプルを実装するためのHTMLとCSSのコードは以下の通りです。

---

build実装方法

グラスモーフィズムは、主に以下の3つのCSSプロパティを組み合わせて実現します。

1. background：半透明の背景色を指定します。rgba()でアルファ値（透明度）を調整するのが一般的です。
2. backdrop-filter: blur(ぼかしの強さ);：これが「すりガラス」効果の核となるプロパティです。要素の真下にある背景をぼかします。
3. border：半透明の背景に、うっすらと境界線を追加することで、要素の輪郭がはっきりと見え、質感が向上します。

実装コード例

<!-- HTML -->
<div class="background-image-area">
  <div class="glass-effect-card">
    コンテンツ
  </div>
</div>

<!-- CSS -->
.glass-effect-card {
  /* 1. 半透明の背景色 */
  background: rgba(255, 255, 255, 0.2);

  /* 2. 背景をぼかす（ベンダープレフィックスも忘れずに） */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);

  /* 3. 薄い枠線を追加 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  border-radius: 12px;
  padding: 2em;
}

---

warningよくある間違いと対策

ぼかし効果（blur）が効かない

backdrop-filterは、Firefoxなど一部のブラウザではまだ標準サポートされていない場合があります。また、backgroundの透明度が0（完全に透明）だと、ぼかす対象がないため効果が見えません。必ず少し色がついた半透明の背景にしましょう。

背景と同化して文字が読みにくい

背景画像によっては、グラスモーフィズムを適用しても文字が読みにくくなることがあります。文字にtext-shadowでうっすらと影をつけたり、背景色（background）の不透明度を少し上げたりして、可読性を確保しましょう。

---

---