直接の回答
グラスモーフィズム生成ツールは、CSSのbackdrop-filterプロパティ、半透明のRGBAカラー、光沢ボーダー、多重ボックスシャドウを組み合わせたモダンなUIコンポーネントを設計・出力します。
このツールの使い方
背景のぼかし（blur）と透明度を設定する
backdrop-filterのぼかし強度とコンポーネント背景のアルファ値をスライダーで調整します。
光沢ボーダーと角丸を調整する
ガラスの縁の反射光を表現する細い白系ボーダーとborder-radiusを設定します。
多重ボックスシャドウを追加する
奥行きを演出するため、拡散の異なる複数のシャドウレイヤーを重ねます。
CSSコードをコピーする
プレビューを確認し、生成されたCSS宣言をワンクリックでプロジェクトに貼り付けます。
backdrop-filterによるすりガラス効果の技術
CSSのbackdrop-filter: blur()は、要素背後にあるコンテンツに対してハードウェアアクセラレーションされたガウスぼかしを適用し、すりガラスのような質感を生み出します。
- 透過背景との組み合わせ：背景色をrgba(255, 255, 255, 0.2)などの半透明色に設定することで、背後の要素が美しく透過します。
- 境界線のハイライト：わずかに不透明な白いボーダー（1px solid rgba(255,255,255,0.3)）を加えることで、ガラスの立体感が増します。
具体例
モダンなダークモード用グラスモーフィズムカード
入力: ぼかし：16px、背景色：rgba(255, 255, 255, 0.05)、ボーダー：1px solid rgba(255, 255, 255, 0.15)、シャドウ：0 8px 32px 0 rgba(0, 0, 0, 0.37)
出力: background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); ...
高級感のあるダッシュボードカードやモーダルダイアログのUIスタイルとして利用できます。
制限事項
- backdrop-filterをサポートしていない古いブラウザ環境では、ぼかし効果が無効化されるため、十分なコントラストを持つ代替背景色のフォールバック指定が必要です。
- 画面全体で多数のグラスモーフィズム要素を重ねると、低スペックなGPU環境でスクロール描画が重くなる場合があります。
よくある質問
Safariブラウザでも正しく表示されますか？
はい。WebKitエンジン用に -webkit-backdrop-filter プレフィックスを付与したCSSコードを自動生成するため、iOSおよびmacOSのSafariでも綺麗にレンダリングされます。
背後に配置したテキストの可読性は維持できますか？
ぼかしの強度と背景の不透明度を適切に調整することで、背景画像のノイズを抑えて前面のテキストの視認性を確保できます。
信頼できる参考文献・標準規格
- W3C Filter Effects Module Level 1: Backdrop Filter ↗ — backdrop-filterのグラフィックスぼかしと分離メカニズムに関するW3C公式規格。