Glassmorphism（すりガラスUI）のCSS作成と backdrop-filter パラメータ

モダンな Web デザインで人気のすりガラス効果（Glassmorphism）を、CSS の backdrop-filter や rgba() を使って実装するためのパラメータ設計とコード生成です。

1. オンライン Glassmorphism CSS ジェネレーター

ぼかし強度（Blur）、背景の不透明度（Opacity）、ボーダーの光沢感をリアルタイムに調整して CSS をコピーできます。

2. Glassmorphism を成立させる 4 つの CSS プロパティ

きれいなガラス表現を作るには、単に背景を透かすだけでなく、ぼかし・境界線の光沢・反射シャドウ の組み合わせが不可欠です。

.glass-card {
  /* ① 背景の半透明色（白 70%） */
  background: rgba(255, 255, 255, 0.7);
  
  /* ② 背後要素のぼかし処理（核となるプロパティ） */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari / iOS 用プレフィックス */
  
  /* ③ エッジの光沢感を生み出すハイライトボーダー */
  border: 1px solid rgba(255, 255, 255, 0.4);
  
  /* ④ ガラスの厚みを感じさせる柔らかい影 */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  border-radius: 16px;
}

3. ダークモード用 Glassmorphism 設定

ダークテーマでは、白背景ではなく 黒の低透明度（15%〜25%） をベースにします。

.glass-card-dark {
  background: rgba(15, 23, 42, 0.65); /* 暗い背景色 */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1); /* 薄い白枠 */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

4. パフォーマンスとブラウザ互換性の注意点

• backdrop-filter 非対応ブラウザへのフォールバック: @supports ルールを使用して、非対応環境では通常のソリッド半透明背景を表示させます。

  @supports not (backdrop-filter: blur(1px)) {
    .glass-card {
      background: rgba(255, 255, 255, 0.95); /* ぼかしが効かない環境では不透明度を上げる */
    }
  }

• GPU 描画コスト: backdrop-filter: blur(40px) など過剰なぼかしを大量の要素に指定すると、低スペック端末でスクロールが遅延します。10px 〜 20px 程度に抑えるのが適正値です。