グラスモーフィズムジェネレーター
すりガラスパネルをデザイン：ぼかし、透明度、ハイライトボーダー、柔らかい影。ガラスの背後にはライブのカラフルシーン。
注意：backdrop-filter は Safari で -webkit- プレフィックスが必要です。出力には自動で含まれています。
グラスモーフィズムジェネレーターの使い方
- ティント色を選び、パネルの透明度を設定。低い値ほど「ガラスらしく」なります。
- ぼかしを上げて背景をすりガラス状に。彩度を加えるとガラス越しの色が鮮やかに。
- 繊細な明るいボーダー（半透明白）を加えて、ガラスのエッジハイライトを表現。
- 柔らかいドロップシャドウと角丸を調整して、浮遊感を仕上げます。
- 背景シーンを切り替えて可読性を確認したら、CSS / Tailwind コードをコピー。
このグラスモーフィズムジェネレーターについて
グラスモーフィズムは、パネルがすりガラスのように見える UI スタイルです：半透明の背景、背景のぼかし、繊細な明るいボーダー、柔らかい影。カード、ナビバー、モーダルの主流デザイントレンドとなりました。魔法の要素は backdrop-filter プロパティで、要素の背後にあるものに効果を適用します。
このジェネレーターでは、ティント・透明度・ぼかし・彩度・ボーダーハイライト・角丸・シャドウのすべてを、3つのカラフルなテストシーンの上で調整でき、効果を現実的に判断できます。出力には Safari 用の -webkit-backdrop-filter プレフィックスが含まれます。アクセシビリティのため、ガラス上のテキストが賑やかな背景の上でも十分なコントラストを保つか必ず確認してください。
グラスモーフィズムのよくある質問
backdrop-filter はどのブラウザでサポートされますか？
すべてのモダンブラウザでサポートされています。Chrome と Edge はプレフィックス不要で、Safari は -webkit- プレフィックスが必要で、ジェネレーターが自動で含めます。非常に古いブラウザでは、パネルは半透明の背景にフォールバックし、それでも許容できる見た目になります。
ガラス効果が表示されないのはなぜ？
backdrop-filter は要素の背後に何か（背景画像・グラデーション・他のコンテンツ）がある場合のみ機能します。平らな単色の背景に置かれている場合、ぼかす対象がありません。また、パネルの背景に透明度（アルファ100%未満）があることを確認してください。さもなければ背景が完全に覆われます。
saturate() 関数は何のため？
saturate() はぼかしの前に背景の色を強め（100%超）、または弱め（100%未満）ます。130〜180% 程度の値はガラス越しの色を鮮やかにし、すりガラス効果をはっきり読み取れるようにします。グラスモーフィズムの象徴的な要素です。
グラスモーフィズムはアクセシビリティに悪い？
強くぼかした低コントラストの背景上にテキストを置く場合は、その可能性があります。透明度を適度に保ち、ボーダーハイライトでエッジを定義し、パネルが覆う最も賑やかな背景の上でテストしてください。3つの内蔵シーンが出荷前のコントラスト確認に役立ちます。
グラスモーフィズムを Tailwind と組み合わせられますか？
はい。Tailwind タブは任意値クラス（bg-[rgba(...)]、backdrop-blur-[12px] など）を出力し、Tailwind CSS v3+ で設定ゼロで動作します。