グラスモーフィズムジェネレーター
ビジュアルコントロールで Glassmorphism の CSS を生成。ぼかし・不透明度・彩度を調整し、すりガラス風の UI 効果を。無料のオンラインツール。
主な機能
- 不透明度・ぼかし・彩度を調整可能
- 任意のティントカラーを選択
- グラデーション背景上のライブプレビュー
- コピーですぐ使える CSS 出力
Guide
グラスモーフィズムは、UI 要素がカラフルな背景の上に浮かぶすりガラスパネルとして見える視覚デザインスタイルです。この効果は3つの CSS プロパティが連携することに依存します：背景の透過（低いアルファの rgba または hsla）、背景のぼかし（backdrop-filter: blur()）、パネルの縁を定義する繊細な境界や影です。このスタイルは2020年の Apple の macOS Big Sur で顕著になり、以降モダンなウェブとモバイル UI デザインの定番になりました。本ガイドでは、グラスモーフィズムを効果的に使うための技術的実装、パフォーマンスへの影響、デザイン原則、実用的なパターンを取り上げます。 グラスモーフィズムパネルのコア CSS には3つの宣言が必要です。第1に、半透明の背景：明るいグラス効果には background: rgba(255, 255, 255, 0.15)、暗いグラス効果には background: rgba(0, 0, 0, 0.25)。第2に、背景のぼかし：backdrop-filter: blur(12px)。第3に、光を捉える境界：border: 1px solid rgba(255, 255, 255, 0.2)。透過した背景、ぼかされた背景、発光する境界の組み合わせがすりガラスの錯覚を作ります。これら3つの要素のいずれかが欠けると効果は平板になります。ぼかしのない透過背景は着色されたオーバーレイのように見えます。透過のないぼかしは要素の背後になにも見せません。そして境界がなければ、パネルの縁が背景に溶け込みます。 backdrop-filter プロパティは要素の背後の領域にグラフィック効果を適用します。CSS filter プロパティと同じフィルター関数をサポートします：blur()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()、drop-shadow() です。グラスモーフィズムでは blur() が主要な関数です。ぼかし半径がすりガラス効果の強さを制御します：blur(4px) は繊細な柔らかさ、blur(12px) は中程度の霜、blur(24px) は背景の詳細がほとんど見えない重い霜を作ります。複数の関数を組み合わせられます：backdrop-filter: blur(12px) saturate(180%) はぼかされた背景に色の鮮やかさを加え、ガラスの背後の色をより鮮やかに見せます。 ぼかし半径の値は、パネルがガラスらしく見えるか solid に見えるかを決定します。低い値（4〜8px）は背景の詳細をより保ち、より軽く感じさせます。中程度の値（10〜16px）は古典的なすりガラスの外観を作ります。より高い値（20px以上）は背景をほぼ完全に隠し、その時点でガラスの比喩を失い、パネルは solid な半透明の表面のように見えます。ほとんどの UI アプリケーションでは8〜16px が視覚的な興味とコンテンツの読みやすさの適切なバランスです。実際の背景コンテンツで選んだぼかし半径をテストし、意図通りに機能することを確認しましょう。 背景のアルファ（透過度）はぼかし半径と緊張関係で機能します。非常に低いアルファ（0.05〜0.10）の背景はより多くのぼかされた背景を示し、より軽く、より透明な感じを作ります。より高いアルファ（0.25〜0.40）の背景は背景をより隠し、より solid で不透明な感じを作ります。適切な組み合わせはガラスパネルの背後にあるものに依存します。忙しくカラフルな背景の上では、より高いアルファとより強いぼかしがテキストの読みやすさを保証します。シンプルで落ち着いた背景の上では、より低いアルファとより軽いぼかしがより上品な効果を作ります。唯一の正しい組み合わせはありません。各デザインコンテキストは、視覚効果と使いやすさのバランスを見つけるためにテストを必要とします。 境界と影はガラスパネルの縁を定義し、錯覚が機能するために不可欠です。境界がなければ、パネルは周囲に溶け込み、立体的な性質を失います。明るいガラスパネルには rgba(255, 255, 255, 0.18)、暗いガラスパネルには rgba(255, 255, 255, 0.08) の細い境界が、本物のガラスの縁に光が当たる様子をシミュレートします。box-shadow が奥行きを加えます：明るい影には box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12)、より劇的な浮き上がりには box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37)。影はパネルが背景の上に浮かんでいることを強調します。一部の実装では追加の奥行きのために2番目の内側の影を加えます。 backdrop-filter のパフォーマンスは本番使用において最も重要な考慮事項です。背景のぼかしは GPU 負荷が高いです。ブラウザが要素の背後のコンテンツをレンダリングし、そのレンダリングされたコンテンツにぼかしフィルターを適用し、半透明の要素の下にぼかされた結果を合成しなければならないからです。ガラスパネルの背後で何かが変化すれば（スクロール、アニメーション、動画）これが毎フレーム起こります。ハイエンドのデスクトップ GPU ではこれは滑らかです。ローエンドのモバイルデバイスでは、著しいフレームドロップとバッテリーの消耗を引き起こせます。パフォーマンスコストはぼかし半径とぼかされる面積とともに増大します。blur(8px) の小さなガラスカードは blur(20px) の全幅ガラスナビゲーションバーよりはるかに安価です。 パフォーマンス最適化の戦略には、一度に見えるガラス要素の数を制限すること（50個のアイテムのグリッドのすべてのカードにガラスパネルを置くことを避ける）、モバイルでぼかし半径を減らすこと（小さい画面では blur(20px) ではなく blur(8px)）、モバイルでアニメーションや動画の背景にガラス効果を避けること、GPU リソースを準備するブラウザへのヒントとしての will-change: backdrop-filter の使用が含まれます。ガラス要素に contain: paint プロパティを使い、合成スコープを制限することもできます。開発マシンだけでなく実際のローエンドデバイスでテストしましょう。MacBook Pro でうまく機能するガラス効果が、Adreno 505 GPU を搭載した低価格の Android スマートフォンでは停滞するかもしれません。 backdrop-filter のブラウザサポートは現在広く行き渡っています。Chrome、Edge、Safari、Firefox はすべてこれをサポートします。-webkit- 接頭辞（-webkit-backdrop-filter）は18より前の Safari バージョンにまだ必要です。Internet Explorer はサポートしません。サポートのないブラウザ向けのフォールバックは、ぼかしのない solid な半透明背景です。これを既定として定義し、その上にぼかしをレイヤー化します：フォールバックとして（ぼかしなしで読みやすさを維持するためにより不透明な）background: rgba(255, 255, 255, 0.7)、そして対応ブラウザ向けに @supports (backdrop-filter: blur(1px)) { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); }。このフォールバックはガラス効果を犠牲にして使いやすさを維持します。 完全なグラスモーフィズムの CSS スニペットは次のようになります。基本スタイルには：backdrop-filter サポートのないブラウザ向けのフォールバックとして background: rgba(255, 255, 255, 0.7)。次に @supports ブロック内で：background: rgba(255, 255, 255, 0.15)、続いて backdrop-filter: blur(12px) と -webkit-backdrop-filter: blur(12px)。@supports ブロックの外で、border: 1px solid rgba(255, 255, 255, 0.2)、box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)、border-radius: 16px を追加します。このパターンはすべてのブラウザを優雅な劣化でカバーします。 グラス効果の色温度がムードを設定します。暖色のガラスはわずかに着色された背景を使います：rgba(255, 200, 150, 0.15) は暖かい琥珀色の着色を加えます。寒色のガラスは青の着色を使います：rgba(100, 150, 255, 0.15)。中立なガラスはさまざまな不透明度で白または黒を使います。着色はガラスの背後にある色と相互作用するため、背景が変化するとともに知覚される色が変化します。この動的な性質が、グラスモーフィズムが生き生きとコンテキストに応答するように感じさせる一部です。ブランドカラーのガラスには、透過効果を維持しながらブランドアイデンティティを強化するために、非常に低いアルファ（0.05〜0.15）でブランドカラーを使いましょう。 ダークモードのグラスモーフィズムはアプローチを逆にします。カラフルな背景上の明るいガラスの代わりに、より明るい境界（rgba(255, 255, 255, 0.08)）を持つ暗いガラス（rgba(0, 0, 0, 0.40) または rgba(17, 25, 40, 0.60)）を使います。背景のぼかしは同じように機能します。暗いガラスパネルは、繊細な色のグラデーションやアンビエントライト効果を持つ暗い背景の上で洗練されて見えます。iOS の Apple のコントロールセンターはダークグラスモーフィズムの典型的な例です。ダークモードでは、境界色のシフトが重要です：境界が明るすぎて見えないように、白い境界から暗い背景のわずかに明るいバージョンに切り替えてガラスの縁を維持します。 ガラスパネル上のテキストの読みやすさは注意深い配慮を必要とします。ここがグラスモーフィズムが最もよく失敗する場所だからです。半透明でぼかされた背景は、パネルの背後にあるものに応じて有効な背景色が変化することを意味します。白いテキストはパネルが背景の暗い領域の上にあるときは読めるかもしれませんが、（例えばスクロール中に）明るい領域の上に移動すると読めなくなります。解決策には、背後にあるものに関わらず最低限のコントラストを保証するためにより高い背景アルファを使うこと、追加の分離のための text-shadow（text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)）、より太いフォントの太さ（400 の代わりに600や700）、ガラスパネルの背後の背景を制御し明るさのばらつきが大きすぎないようにすることが含まれます。 レイヤー化されたガラスは、異なるぼかしレベルと不透明度で複数のガラスパネルを積み重ねて奥行きを作ります。重いぼかしと低い不透明度の背景ガラスレイヤーが、より軽いぼかしとわずかに高い不透明度の前面ガラスパネルの背後にあります。これが奥行きと階層の感覚を作ります。Apple は macOS と iOS でこれを広範に使います。z-index のレイヤー化で実装します：背景レイヤーはより高いぼかし半径（blur(20px)）を持ち、前面レイヤーはより低いぼかし半径（blur(8px)）とわずかに高い不透明度を持ちます。3つ以上のレイヤーも可能ですが稀で、各レイヤーはレンダリングコストを追加します。 グラスモーフィズムは特定の UI パターンに最適です：コンテンツの上に浮かぶナビゲーションバー、モーダルダイアログとオーバーレイ、通知パネル、サイドバー、ヒーローセクションの上のカード要素、アルバムアートの上のメディアプレーヤーコントロール、ツールチップとポップオーバー要素、データビジュアライゼーションの上のダッシュボードウィジェットです。密集したコンテンツ領域（記事のテキスト、データテーブル、多くのフィールドを持つフォーム）ではうまく機能しません。ガラスの背後の変化する背景がコンテンツから注意をそらすからです。ガラス効果をアクセントとして使い、ページ上のすべてのものの既定の表面処理としては使いません。 ガラスパネルの背後の背景はガラス自体と同じくらい重要です。グラスモーフィズムは滑らかな移行を持つカラフルなグラデーション背景の上で最も美しく見えます。深い紫から海の青への、または暖かいオレンジからピンクへのグラデーションが、ぼかし効果に理想的な背景を提供します。ガラスパネルはこれらの色を美しく和らげ拡散します。plain な白や plain な黒の背景では、ぼかすものがなにもないためガラス効果は見えません。鋭い詳細を持つ忙しい写真の背景では、ぼかしは泥臭い結果を作ります。背景とガラスパネルをシステムとして一緒に設計しましょう。 グラスモーフィズムを他のデザイン要素と組み合わせれば効果が高まります。ガラスパネルの背景の繊細なグラデーション（rgba(255,255,255,0.2) から rgba(255,255,255,0.05) への linear-gradient）が指向性の光を加えます。内側の影（box-shadow: inset 0 1px 0 rgba(255,255,255,0.2)）はガラスの上端に光が当たる様子をシミュレートします。border-radius がパネルを柔らかくします（16〜24px がグラスモーフィズムデザインで一般的です）。これらの詳細が一緒になって、ガラスをより物理的で三次元に感じさせます。 ガラス要素を使ったアニメーションは滑らかで目的のあるものであるべきです。opacity トランジションでガラスパネルをフェードインします。transform の移動で位置にスライドさせます。backdrop-filter のぼかし値自体をアニメーションするのは避けましょう。ぼかし半径を毎フレーム変更するとブラウザにぼかされた背景を再生成させ、これは極めて高価です。ぼかしのアニメーションが必要な場合、疑似要素に CSS filter: blur() を使った別のぼかされた背景レイヤーをアニメーションすることを検討しましょう。これは backdrop-filter よりブラウザが最適化しやすいです。ガラス要素上の transform と opacity のアニメーションは、ぼかしの再計算を必要としないため良く機能します。 グラスモーフィズムのデザインシステム統合には、一連のガラストークンの定義が必要です：明るいと暗い不透明度でのガラス背景色、ガラス境界色、ガラス影値、異なるコンテキスト用のガラスぼかし半径です。再利用可能な CSS クラスまたはコンポーネントバリアントを作ります：.glass-light、.glass-dark、.glass-subtle、.glass-prominent。どのガラスバリアントがどの背景タイプで機能するかを文書化します。これにより、コードベース全体にわたるアドホックなガラス値の不整合を防ぎ、効果がサポートされないブラウザで一貫して劣化することを保証します。 React、Vue、その他のコンポーネントフレームワークでのグラスモーフィズムは、通常再利用可能なコンポーネントまたは CSS ユーティリティクラスとして実装されます。React では、GlassPanel コンポーネントがぼかしの強度、不透明度、着色色、境界の可視性の props を受け取り、計算されたスタイルを持つ div をレンダリングします。Tailwind CSS はユーティリティクラスでグラスモーフィズムを素直にします：bg-white/15 backdrop-blur-md border border-white/20 rounded-2xl shadow-lg。コンポーネントレベルの実装はアプリケーション全体で一貫したガラス効果を保証し、デザイン要件が変わったときに効果を更新する単一の場所を提供します。 グラスモーフィズムのアクセシビリティの懸念は、テキストの読みやすさとモーションの過敏さを中心とします。前述の通り、ガラスパネルの背後の変化する背景はテキストを読みにくくできます。加えて、ぼかし効果自体は視覚効果であり、特にガラスパネルが変化する背景の上をスクロールするとき、前庭障害を持つ一部のユーザーが混乱すると感じる可能性があります。prefers-reduced-transparency と prefers-reduced-motion のメディアクエリを尊重しましょう。透明度を減らすことを好むユーザーには、solid な不透明背景にフォールバックします。モーションを減らすことを好むユーザーには、ガラスパネルのアニメーションを避けましょう。 グラスモーフィズムは他のデザイントレンドと比較して特定のニッチを占めます。ニューモーフィズム（ソフト UI）は、同じ色の背景上で浮き上がった効果と押された効果を作るために繊細な影を使います。これはコントラストが悪くアクセシビリティの問題に苦しみます。フラットデザインは奥行き効果のない solid な色を使います。マテリアルデザインは不透明な表面に浮き上がりと影を使います。グラスモーフィズムはフラットデザインとマテリアルデザインの中間に位置し、影だけでなく透過を通じて奥行きを加えます。これはアクセントスタイルとして最も良く機能します。アプリケーション全体をグラスモーフィズムにすると視覚的にうるさくなります。選択的な使用（ナビゲーション、モーダル、特集カード）は、ユーザーを圧倒することなく視覚的な興味を作ります。 グラスモーフィズムの実装の実際の例が参照点を提供します。Apple は macOS（メニューバー、サイドバー、通知センター）と iOS（コントロールセンター、ウィジェット、アプリスイッチャー）でグラスモーフィズムを広範に使います。Microsoft は Windows 11（スタートメニュー、タスクバー、設定パネル）で Acrylic マテリアルを使い、これはノイズテクスチャオーバーレイを持つグラスモーフィズムのバリエーションです。これらの実装は、オペレーティングシステムやアプリケーションが背景コンテンツを制御し、一貫したレベルのぼかしとコントラストを保証するとき、グラスモーフィズムが最も良く機能することを示します。ウェブでは、背景とガラスパネルの両方を制御するため、同じレベルの制御を持っています。 ノイズテクスチャオーバーレイはガラスパネルに繊細な粒子を加え、より物理的なすりガラスのように見せます。本物のすりガラスは完全に滑らかなぼかしではなく、わずかに粗いテクスチャを持っています。このテクスチャを非常に低い不透明度（2〜5パーセント）でノイズ PNG または SVG フィルターを使った疑似要素で追加できます。ノイズはガラスがデジタル的にきれいすぎて見えるのを防ぎます。Microsoft の Acrylic マテリアルがこの技法を使います。実装：小さなタイル状のノイズ画像を背景として持つ ::before 疑似要素を追加し、absolute でパネルを満たすように配置し、不透明度を0.03〜0.05に設定します。 スクロール時のグラスモーフィズムは慎重な実装を必要とします。スクロールするコンテンツの上の固定ガラスナビゲーションバーは、異なるコンテンツが背後を通過するときに絶えず変化するぼかし効果を作ります。これは素晴らしく見えますが、スクロール中に毎フレーム backdrop-filter を再計算しなければならないため性能負荷が高いです。スクロールベースの重いぼかしを持つ長いページでは、モバイルではよりシンプルな効果（solid な半透明背景）を使い、GPU パワーが通常十分なデスクトップで完全なガラス効果を温存することを検討しましょう。 異なるコンテンツタイプをガラスの背後でテストすれば、実装がどれほど堅牢かが明らかになります。テキストコンテンツ、画像、動画、solid な色、グラデーション、混合コンテンツがガラスパネルの背後を通過する状態でテストしましょう。各コンテンツタイプは異なるぼかし結果を作ります。ガラスの背後の密集したテキストは灰色のぼかしを作ります。カラフルな画像は鮮やかで変化する色を作ります。動画は絶えず変化するぼかしを作ります。ガラスパネルはこれらすべてのシナリオにわたってテキストの読みやすさと視覚的魅力を維持するか、ガラス要素の背後に現れるコンテンツを制限する必要があります。 グラスモーフィズムとすりガラスサイドバーパターンの組み合わせが特徴的なアプリケーションレイアウトを作ります。メインコンテンツ領域の上のガラスサイドバーは、コンテンツを完全に隠すことなくナビゲーションを提供します。サイドバーにホバーするまたは展開するとガラス効果のより多くが現れます。このパターンはサイドバーが副次的要素であるダッシュボードと管理パネルに適しています。ガラススタイルを持つ固定または sticky サイドバー要素を、適切な z-index でメインコンテンツ領域の上に配置して実装します。 backdrop-filter の CSS のみの代替は、古いブラウザや性能が制約された状況のために存在します。コンテンツの背後に配置された疑似要素（::before）は、background-attachment: fixed とページと同じ背景画像、加えて CSS filter: blur() を使って背景のぼかされたコピーを持てます。このアプローチは要素の背後の実際のコンテンツをぼかさない（代わりに固定背景画像をぼかす）ため、動的コンテンツではなく固定背景にのみ機能します。この制限にもかかわらず、ぼかしが毎フレーム再計算されるのではなく静的画像に一度適用されるため、backdrop-filter より良いブラウザサポートと性能で説得力のあるガラス効果を作ります。 グラスモーフィズム生成ツールを使えば、サンプル背景の上で結果をプレビューしながら、背景色、不透明度、ぼかし半径、境界、影をリアルタイムで調整できます。生成された CSS を直接スタイルシートにコピーします。生成された値をベースラインとして使い、実際の背景とコンテンツのコンテキストで精製しましょう。生成ツールは Safari 互換性のための -webkit- 接頭辞と backdrop-filter サポートのないブラウザのための @supports フォールバックを含む構文を処理します。
よくある質問
Glassmorphism とは何ですか？
半透明ですりガラス風の要素に背景ぼかしと控えめな境界線を組み合わせた UI デザイントレンドのことです。
Glassmorphism はすべてのブラウザで動作しますか？
backdrop-filter プロパティは Chrome、Firefox、Safari、Edge などモダンブラウザすべてでサポートされています。
