Glassmorphism CSS ジェネレーター

使い方

1. 背景色を選択し、背景の不透明度を設定します（通常10〜25%）。
2. ブラーを大きくして（10〜20px推奨）すりガラス効果を得ます。
3. 彩度でガラスの後ろに見える色の鮮やかさを調整します。
4. ボーダー色・ボーダーの不透明度・ボーダー幅を設定します。細い半透明のボーダーがガラスの縁を明確にします。
5. 角丸でカードの角を丸めます（12〜20pxが一般的）。
6. 柔らかなシャドウを加えてカードを背景から浮かせます。
7. 背景プリセット（サンセット・オーシャン・フォレスト・ナイト・オーロラ）を切り替えて様々な背景でエフェクトを確認します。
8. コピーをクリックして生成されたCSSをクリップボードにコピーします。

CSS出力リファレンス

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);
}

よく使われるグラスモーフィズムのプリセット

• ライトガラス（白）：background rgba(255,255,255,0.15)、blur 12px、border rgba(255,255,255,0.3)
• ダークガラス：background rgba(0,0,0,0.25)、blur 16px、border rgba(255,255,255,0.1)
• 強いすりガラス：background rgba(255,255,255,0.25)、blur 20px、saturation 200%
• ミニマル：background rgba(255,255,255,0.08)、blur 8px、ボーダーなし

ブラウザサポートについて

backdrop-filterは主要ブラウザすべてでサポートされています（Chrome 76+、Firefox 103+、Safari 9+、Edge 79+）。必ずbackdrop-filterと-webkit-backdrop-filterを両方記述してください。非対応ブラウザ向けのフォールバックとして、半透明の単色背景を用意することをお勧めします。

関連ツール

• CSS ボックスシャドウ生成器 — シャドウ値を詳細に調整
• CSS 変数ジェネレーター — ガラスエフェクトの値をデザイントークンとして保存
• CSS Grid ジェネレーター — ガラスカードの背景レイアウトを構築
• CSS Flexbox ジェネレーター — Flexboxでガラス要素を配置