CSSグラスモーフィズム生成
CSSグラスモーフィズム(すりガラス効果)をライブプレビューで生成。ぼかし、不透明度、背景色、ボーダー、シャドウを調整。CSSコードをコピー。無料、100%ブラウザで動作。
プレビュー
Glassmorphism
10px
20%
30%
CSS出力
リファレンス
グラスモーフィズムとは?
グラスモーフィズムは、すりガラスのような半透明の効果を持つUIデザインスタイルです。backdrop-filter: blur()を使用して背景をぼかし、半透明の背景色と微妙なボーダーを組み合わせて、ガラスのような外観を作り出します。
ブラウザサポート
backdrop-filterは主要な最新ブラウザすべてでサポートされています。Chrome、Edge、Safari、Firefoxの最新版で利用可能です。古いブラウザ向けには、@supportsルールを使って半透明の背景色にフォールバックすることを推奨します。
プライバシー
すべての生成処理はブラウザで100%実行されます。データはサーバーに送信されません。