グラスモーフィズムジェネレーター

このツールについて

このグラスモーフィズム作成ツールは、CSS の backdrop-filter ですりガラス効果を作ります。ぼかし、背景の不透明度、彩度、ボーダーの不透明度、角丸、色合いをライブプレビューしながら調整できます。

使い方

1. ガラスの色合いを選びます。
2. ぼかし、不透明度、彩度を調整します。
3. ボーダーの不透明度と角丸を設定します。
4. 「CSS をコピー」をクリックします。

知っておきたいこと

• この効果は backdrop-filter: blur() saturate() を使い、要素の背後にあるものをぼかします。
• 半透明の背景（rgba）が必要です。そうでないと、ぼかしが隠れてしまいます。
• 生成される CSS には、Safari 向けの -webkit-backdrop-filter プレフィックスが含まれます。
• ガラス効果はカラフルな背景や画像の背景の上で最も映えます。単色の上ではぼかしが見えません。
• 文字のコントラストに注意してください。半透明のパネルは、ごちゃごちゃした背景の上では WCAG のコントラストを下回ることがあります。

すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。

よくある質問