CSS グラスモーフィズム生成ツール
独自のグラデーション上で半透明パネルを調整し、効果をプレビューして標準 CSS をコピーします。
使い方
使い方
- 背景とパネルの色を選び、透明度、ぼかし、彩度、枠線、角丸、影を設定します。
- プレビューを確認し、文字のコントラストに注意します。
- CSS を生成、コピー、またはリセットします。
実用的なガラス効果
rgba の背景、半透明の枠線、backdrop-filter のぼかしと彩度、角丸、柔らかな影を組み合わせます。独自の多色グラデーションで透明度とぼかしを確認できます。
フォールバックとコントラスト
backdrop-filter 非対応でも半透明背景は表示されますが、効果は弱まります。文字やアイコンのコントラストを確認し、装飾的な透明表現を読みやすい配色の代わりにしないでください。
よくある質問
あわせて知りたいこと
backdrop-filter 非対応ではどうなりますか？
半透明背景、枠線、角丸、影は残り、背景のぼかしと彩度強調だけが使えません。
同じ設定でも見た目が違うのはなぜですか？
ぼかしと彩度は背後の色や細部に依存し、透明度は現在の背景と合成されます。
文字のコントラストはどう確認しますか？
最終背景で実際の文字をプレビューし、どこでも明瞭でなければパネルを不透明にするか文字色を強めてください。