グラスモーフィズム生成

すりガラス効果（背景ぼかし）をライブプレビューとコピー可能なCSSで作成。

手探りなしのガラス効果

ぼかし・透明度・角丸・枠線を設定すると、すりガラスパネルがカラフルな背景上でライブ更新され、完全なCSS（Safari接頭辞付き）がコピー可能に。

Safari用に -webkit-backdrop-filter 接頭辞を追加。効果は単色でない背景上でのみ見えます。すべてローカル生成。

グラスモーフィズムとは？

すりガラスを模したUIスタイル。半透明のパネルが背後をぼかし、薄く明るい枠線を持ちます。現代的なカード・バー・ウィンドウに広く使われます。

CSSでどう実現する？

backdrop-filter: blur(...) で背景をぼかし、半透明のrgba背景、border-radius、明るいrgba枠線を使います。ツールはこれらの行とSafari用の-webkit-接頭辞を生成します。

なぜ背景はカラフルである必要が？

パネルの背後にぼかす対象があるときだけ効果が見えます。単色背景では消えます。そのためプレビューはグラデーション上にガラスを置いて示します。

全ブラウザで使える？

backdrop-filterは最近のブラウザで十分サポートされています（Safariは-webkit-）。非常に古いブラウザ向けには、可読性のためやや不透明なフォールバック背景を用意しましょう。