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

グラスモーフィズムとは、要素をフロストガラスのように見せるUIスタイルです。背後のコンテンツをぼかす半透明パネルに、細い明るいボーダーと深みを出す柔らかいシャドウを組み合わせます。macOS Big Sur、Windows 11のアクリルサーフェス、モダンなログインカードで見られるスタイルです。3つの構成要素は、半透明の背景色・バックドロップブラー・繊細な1pxのボーダーです。例：background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3)。

要素に半透明の背景色とバックドロップブラーを設定し、細いボーダーを加えます。基本的な出発点はこちらです：background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2)。ポイントは、背景色を部分的に透明にして（rgba()使用）バックドロップブラーが透けて見えるようにすることです。上のスライダーで細かく調整して、正確なCSSをコピーしてください。

backdrop-filterは、要素自体のコンテンツではなく要素の背後の領域にグラフィカルエフェクト（最もよく使われるのはblur()）を適用します。つまり、backdrop-filter: blur(10px)はボックスの背後にレンダリングされたものをぼかし、フロストガラスの見た目を作り出します。フィルターをチェーンすることもでき、例えばbackdrop-filter: blur(10px) saturate(150%)とすると、ガラス越しの背景を同時にぼかして色を強調できます。要素自身の背景が少なくとも部分的に透明な場合にのみ効果が現れます。

フロストガラスはより強いブラーとやや不透明度の高いティントを使ったグラスモーフィズムです。以下を試してみてください：background: rgba(255,255,255,0.25); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255,255,255,0.4); border-radius: 16px。ブラーを14〜20pxに上げ、ティント不透明度を20〜30%程度にすることで、透明感よりも「フロスト」な質感が生まれます。UtiloKitのフロストカードプリセットはこれらの値を即座に設定してくれるので、そこから調整を始めることができます。

はい。backdrop-filterは現在の主要ブラウザ（Chrome・Edge・Firefox・Safari）すべてでサポートされています。Safariは長年-webkit-backdrop-filterプレフィックスの下でサポートしていたため、常に両方の行を含めてください：-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px)。UtiloKitのグラスモーフィズムジェネレーターはプレフィックス付きのバージョンを自動で出力します。サポートしていない非常に古いブラウザでは単純に半透明の背景色が表示され、優雅にデグレードします。

よくある3つの原因があります：(1) 要素の背後にぼかすコンテンツがない — backdrop-filterはその背後にレンダリングされたコンテンツにのみ作用するため、画像やグラデーションの上に配置する必要があります；(2) 要素自体の背景が完全に不透明になっている — ブラーが透けて見えるよう、rgba(255,255,255,0.18)のようなrga()値を使用してください；(3) Safariのための-webkit-backdrop-filterプレフィックスを忘れている。また、祖先要素にfilter・transform・will-changeがあると、含有ブロックが作られてエフェクトが完全に壊れることにも注意してください。

backdrop-blurユーティリティと半透明の背景色および薄いボーダーを組み合わせます。例：class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg"。backdrop-saturate-150を使って背景の色を強調することもできます。正確な値については、上の出力をTailwindタブに切り替えてください。スライダーと正確に一致するbackdrop-blur-[10px]、bg-[#ffffff]/18、border-[1px]、border-[#ffffff]/30、rounded-[16px]のような任意値クラスが出力されます。手書きCSSでもユーティリティファーストのワークフローでも便利に使えます。

グラスモーフィズムは透明度と背景ブラーを使い、要素がコンテンツの上にフロートするフロストガラスのように見せます。ニューモーフィズム（ソフトUI）はその逆で、ページと同じ色の不透明な要素に、ライトとダークのシャドウのペアで3Dの押し出し感を与えます（例：box-shadow: 8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff）。グラスモーフィズムが輝くにはカラフルな背景が必要で、ニューモーフィズムが機能するにはフラットな単色背景が必要です。

多くのカードにはバックドロップブラー8〜16pxが適切です。軽く微かなフロストガラスには約5〜8px、一般的なカードやモーダルには10〜16px、重厚なフロストガラスのナビバーやオーバーレイには16〜25px程度が目安です。ブラーを強くする場合はティント不透明度も少し上げてテキストの可読性を確保してください。上のブラースライダーは0〜40pxの範囲があるため、特定の背景画像に対して試行錯誤なしにスイートスポットを見つけることができます。

可読性はテキストとぼかされた背景のコントラストから生まれます。ティント不透明度を25〜40%程度に上げて表面の透明度を下げ、backdrop-saturateを加えて背景の賑やかな色を落ち着かせ、強いコントラストのあるテキスト色を選びましょう。暗くティントされたガラスには白いテキスト、明るいティントには暗いテキストが適しています。本文テキストにはWCAG 4.5:1のコントラスト比を目指し、背景画像の最もカラフルな部分の上に小さなテキストを置くことは避けてください。

対応可能ですが、注意が必要です。透明度はガラスの背後の色が常に変化するためコントラストが予測しにくくなり、テキストがWCAG 4.5:1の最低値を下回る可能性があります。十分なティント不透明度（30%以上）を使用し、最も賑やかな背景に対してテキストをテストし、ブラーだけでコンテンツを分離することに頼らないでください。また、prefers-reduced-transparencyを設定しているユーザーのために、CSSでより不透明なフォールバックを提供することも考慮してください。

Glassmorphism.com（Michal Malewicz氏作）は一つのスタイルの素早い出発点を提供しますが、独自の背景画像アップロード・彩度調整・Tailwindクラスのエクスポートができません。Glass UI（glass-ui.com）も同様に制限があり、単一背景プレビューのみで、Tailwind出力なし、共有リンクもありません。UtiloKitでは独自の画像をドロップして彩度やシャドウ強度を含むすべてのパラメーターを調整し、CSSとTailwind両方の出力を取得し、URLで正確な設定を共有できます。すべてのデータはサーバーにアップロードされることなくブラウザ上で処理されます。

コンテナを背景画像またはグラデーションの上に配置し、生成されたCSSをカードに適用します。最小限の例：親要素に背景を設定し、子要素にbackground: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 24pxのスタイルを適用します。上の出力から用意済みのHTMLスニペットをコピーしてください。マークアップと、追加セットアップなしにページにそのまま貼り付けられるスタイルブロックが含まれています。

はい。UtiloKitのグラスモーフィズムジェネレーターは完全にモバイル対応しており、iPhoneのSafari、AndroidのChrome、その他のモダンなモバイルブラウザで動作します。スライダーはタッチ操作に対応しており、ライブプレビューはリアルタイムで更新され、CSSやTailwindのコピーもデスクトップと同様にスマートフォンのクリップボードから行えます。すべてがサーバーなしでブラウザ上で動作するため、インストールは不要です。ページを開けばすぐにデザインを始められます。

はい。「リンクをコピー」ボタンをクリックすると、すべてのスライダーの値がURLに直接エンコードされます。そのリンクをデザイナーや開発者と共有すれば、まったく同じ設定（同じブラー・同じティントカラーと不透明度・同じ彩度・同じボーダー設定とシャドウ）でページが開きます。アカウント不要、エクスポートファイルも不要。これはglasmorphism.comやGlass UIが対応していない点で、どちらも共有可能な設定リンクをサポートしていません。