すりガラス風のUIに必要なCSS（背景のぼかし・半透明・枠線）をまとめて生成します。カードやナビゲーションバーの装飾に使えます。
必要な指定
背後をぼかすのは backdrop-filter です。要素自身をぼかす filter とは別物なので、混同しないよう注意してください。
background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px;
きれいに見せる条件
- 背景に色や模様があること（単色の背景ではぼかしの効果が分かりません）
- 背景色の不透明度は10〜25%程度が目安
- 明るい枠線を薄く入れると、ガラスの縁の質感が出ます
- 文字色は背景とのコントラスト比を確保する（読みにくくなりやすい表現です）
使うときの注意
backdrop-filterは描画負荷が高く、スクロールする領域や広い面積に使うと動作が重くなることがあります。固定ヘッダーやモーダルなど、限られた範囲での使用が向いています。
また、背景によっては文字が読みにくくなります。アクセシビリティの観点では、コントラスト比4.5:1以上を確保してください。
よくある質問
Q backdrop-filterとfilterの違いは？
backdrop-filterは要素の背後をぼかし、filterは要素自身をぼかします。すりガラス表現には前者を使います。
Q 効果が見えないのはなぜ？
背景が単色だとぼかしの変化が分かりません。また、親要素にoverflowやfilterが指定されていると効かない場合があります。
Q 対応していないブラウザは？
主要ブラウザは対応していますが、古い環境では効果が無視されます。背景色だけでも成立するデザインにしておくと安全です。
Q 動作が重いのですが？
backdrop-filterは負荷が高い処理です。適用範囲を狭める、ぼかし量を下げるなどで改善します。