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

ライブプレビュー付きのトレンディなフロステッドガラスUI効果を作成します。CSSコードをカスタマイズしてコピーします。

10px
25%
180%
30%
16px

ガラスカード

これは純粋なCSSで作られたglassmorphism効果です。

CSSコード

Glassmorphismとは?

Glassmorphismは、ぼかし効果を通して背景を透けて見せる、フロステッドガラスのような要素を強調するUIデザイントレンドです。CSSのbackdrop-filter: blur()プロパティ、半透明の背景、繊細なボーダーを使用して、モダンで階層化されたレンダリングを実現します。ダッシュボード、カード、モーダルのインターフェースで人気があります。

ブラウザ互換性

backdrop-filterは、Chrome、Edge、Safari、Firefox 103+を含むすべての最新ブラウザでサポートされています。古いバージョンのFirefoxには、フォールバックとして単色の背景色を計画してください。

仕組み

  1. バックドロップの色を選ぶ。ガラスが見えるためには背後に何かが必要だ。プレビューエリアにソリッドな背景・グラデーション・写真を選んで、実際のレイアウトでぼかしがどう見えるかを判断すること。
  2. ぼかしと彩度を設定する。ぼかし半径はすりガラスの光散乱をシミュレートし；彩度はパネルの後ろから色を前に引き出す。古典的なAppleスタイルのレシピはblur(10px) saturate(180%)前後だ。
  3. ガラスの色と透明度を調整する。要素自体の背景は部分的に透明でなければならない。不透明な色がバックドロップを完全に覆ってしまう。白または黒の10-30%アルファが典型的な出発点だ。
  4. ボーダーとコーナー半径を調整する。低いアルファの細い白いボーダーは、物理的なガラスの内縁のハイライトを模倣する。12-20px前後のborder-radiusは、ほとんどのグラスモーフィズムデザインが使うソフトカードの見た目を与える。
  5. CSSをコピーする。生成されたプロパティブロックをスタイルシートに貼り付ける。古いSafariをサポートする必要がある場合は-webkit-backdrop-filterのコンパニオン行を追加すること。

この用語の由来

このビジュアルはラベルより古い。Appleは2013年にiOS 7で通知パネルとコントロールセンターにリアルタイムのぼかしバックドロップを導入し、翌年macOS Yosemiteでデスクトップにも展開した。WebKitチームは2015年8月に、「iOS 7とOS X Yosemiteのユーザーインターフェースデザイン言語が美しいバックドロップぼかし効果を取り入れるように変わった」という理由でCSSのbackdrop-filterプロパティを出荷した。マイクロソフトの以前のWindows Vista「Aero Glass」（2007年）も同じアイデアだ。マイクロソフトは現代のFluentシステムで2つの関連するマテリアルを文書化している：Acrylic（半透明・ぼかし・ノイズオーバーレイ付き）とMica（Windows 11で導入された不透明なデスクトップ色調のバリアント）。「glassmorphism」という名前は、macOS Big Surのリリースと同時に2020年11月にHype4 AcademyのポーランドのデザイナーMichał Malewiczによって造語された。以前の「neumorphism」と同じファミリーの命名の一貫性が、デザイナーにこのテクニックを議論する共通語彙を与えた。

CSSレシピ

.glass-card {
  /* 1. Element background: must be partially transparent */
  background: rgba(255, 255, 255, 0.18);

  /* 2. The frosted-glass effect */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 9-16 */

  /* 3. The inner-edge highlight */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Soft corners */
  border-radius: 16px;
}

レシピについて内面化すべき3つのこと。第一に、要素自体の背景は透明または部分的に透明でなければならない。MDNははっきり述べる：「エフェクトが見えるためには、要素またはその背景は透明または部分的に透明でなければならない。」完全に不透明なbackground-colorはぼかしたサンプルを覆い、ユーザーはフラットなパネルを見る。第二に、エフェクトにはぼかすための背後の何かが必要だ。グラスモーフィズムは均一な白いページの上では機能しない。第三に、現代のSafariは接頭辞なしのプロパティを受け入れるが、Safari 17より古いものはbackdrop-filterと-webkit-backdrop-filterの両方が必要だ。

10のフィルター関数すべて

backdrop-filterはW3Cのフィルターエフェクトモジュールレベル2で定義されており、通常のfilterプロパティと同じ10のフィルター関数を受け入れる：blur()・brightness()・contrast()・drop-shadow()・grayscale()・hue-rotate()・invert()・opacity()・saturate()・sepia()。チェーンでき、順序が重要で、バックドロップサンプルに対して左から右に適用される。グラスモーフィズムにはblur()とsaturate()の組み合わせで定番の見た目をカバーできる；それ以外はクリエイティブな調整だ（例えばダークなバックドロップでぼかしたサンプルを持ち上げるbrightness(105%)、または色の関係をシャープに保つcontrast(120%)）。

ブラウザサポートと-webkit-プレフィックス

2026年時点でこのプロパティはすべてのエバーグリーンブラウザでサポートされている。WebKitは2015年8月10日にSafari 9 / iOS 9で-webkit-backdrop-filterプレフィックス付きで最初に出荷した。Chromeはバージョン76（2019年7月）で接頭辞なしのサポートを追加し、Edgeはバージョン79でのChromiumへの切り替えに続き、Firefox 103は2022年7月26日にフラグなしで有効化した。MDNはこのプロパティをBaseline 2024（2024年9月以降新たに利用可能）としてフラグを立てており、4つの主要エンジンすべてが相互運用するようになった。実際のサポートは世界的に約95%だ。古いSafariのビルド（とPostCSSユーザー）をカバーするには、接頭辞付きと接頭辞なしの宣言を並べるか、autoprefixerがBrowserslistの設定からプレフィックスを追加するようにすること。

サポートしていないブラウザのフォールバック

@supportsクエリを使い、サポートしていないブラウザが読めない透明パネルの代わりにソリッドなフォールバックを得られるようにする：

.glass-card {
  background: rgba(30, 41, 59, 0.92); /* opaque fallback */
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
  }
}

パフォーマンス：使う場面と使わない場面

backdrop-filterはGPUアクセラレーションされているが、タダではない。各フィルターされたサーフェスはブラウザに別の合成レイヤーを維持させ、要素の背後のエリアを再サンプリングさせる。W3Cのエディターズドラフトはこれを直接認め、ネストされたまたはスタックされたバックドロップフィルターが「指数関数的なレンダリングパス」を引き起こす可能性があると指摘し、WebKitの起動投稿はこのプロパティが「エンジンにより多くのレンダリングパスを実行させ、パフォーマンスに影響を与える」と警告している。web.devの簡潔なまとめが当てはまる：「backdrop-filterはパフォーマンスに悪影響を与える可能性がある。デプロイ前にテストすること。」

実用的なルール：本番コードではぼかし半径を約20px以下に保つ・スクロールのたびに再描画するガラスのナビバーは典型的な問題なので全画面ガラスサーフェスを避ける・フィルターされたサーフェスを何層も重ねない・ぼかしが毎フレーム再計算が必要なbackdrop-filterの上の<video>を避ける。マイクロソフトはFluentのドキュメントで同様のことをAcrylicユーザーに伝えている：「デバイスがバッテリーセーバーモードに入ると、Acrylic効果は自動的に無効になります。」

アクセシビリティ：コントラストの落とし穴

グラスモーフィズムは定義上、テキストとその背景のコントラストを下げる。パネルの下の「背景」は今や背後にあるものになり、ユーザーがスクロールするか壁紙を変えるたびに変化するからだ。関連するWCAG 2.1の最小値（通常本文テキストに4.5:1、大きいまたは太いテキストに3:1）は、平均ではなく最悪のケースのバックドロップに対して満たす必要がある。実用的なガイダンス：本文テキストはガラスパネルから出して、実際の読み取りが不透明な内側のサーフェスに対して行われるクロム（カード・ヘッダー・モーダル）に主に使うこと。OSレベルで透明度をオフにしたユーザーのために不透明なフォールバックバリアントを常に提供すること。macOS（システム設定 → アクセシビリティ → ディスプレイ → 透明度を下げる）とWindows（設定 → 個人設定 → 色 → 透明効果）の両方がトグルを公開しており、CSSで検出できる：

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

グラスモーフィズムが機能する場面と機能しない場面

よくある間違い

  1. 透明な背景を忘れる。backdrop-filterを不透明なbackground-colorを持つ要素に設定しても可視効果は生じない。不透明な色がぼかしたサンプルを覆うためだ。常にrgba()/hsla()の背景とペアにすること。
  2. フラットな色の上のガラス。パネルの背後に興味深いものがない場合、ぼかしても「ガラス」にはならず、ほんのりと色付いた長方形になるだけだ。エフェクトには写真・グラデーション・にぎやかなバックドロップが必要だ。
  3. -webkit-プレフィックスをスキップする。古いSafariのビルドには必要だ。両方の行を出荷するか、autoprefixerに頼ること。
  4. パネルを重ねすぎる。各フィルターされたサーフェスは独自のGPUレイヤーだ。モバイルでフレームレートが低下する前の実際の限界は通常3〜4枚だ。
  5. 最悪のケースのコントラストチェックに失敗する。パネルが配置されるすべてのバックドロップの最も明るいパッチと最も暗いパッチに対してテストすること。デモのスクリーンショット1枚だけではなく。
  6. ぼかし半径をアニメートする。ホバー時にbackdrop-filter: blur(0) → blur(20px)をトランジションすることは技術的には可能だが、毎フレームぼかしを再計算するためスクロールパフォーマンスを最も簡単に悪化させる方法だ。代わりにopacityやtransformをアニメートして、ぼかしは静的にしておくこと。

よくある質問

ガラスカードがフラットパネルのように見えるのはなぜですか？

要素自体のbackground-colorが完全に不透明だ。backdrop-filterは要素の背後にあるものをぼかすが、要素はその上に描画する。不透明な背景があると、その描画がぼかしたサンプルを覆う。rgba()またはhsla()の10-30%アルファに切り替えること。ほとんどのグラスモーフィズムデザインのスイートスポットだ。

Safariで動作しますか？

はい、Safariは2015年8月に最初にこのプロパティを出荷したブラウザだ。古いSafariのバージョンには-webkit-backdrop-filterプレフィックスが必要だ；現代のSafariは接頭辞なしの形式を受け入れる。両方を含めることで、現在アクティブに使われているすべてのSafariのビルドで同じCSSが動作する。

グラスモーフィズムはアクセシブルですか？

最悪のケースのバックドロップに対してデザインした場合のみ。WCAG 2.1は通常テキストに4.5:1、大きいまたは太いUIコンポーネントに3:1のコントラスト比を要求している。パネルの下に最終的にある色に対して測定する。OSレベルで透明度をオフにしたユーザーのためにprefers-reduced-transparencyメディアクエリの下に不透明なフォールバックを提供すること。

パフォーマンスに悪影響がありますか？

ある可能性がある。各フィルターされたサーフェスはブラウザに別の合成レイヤーを維持させ、背後のエリアを再サンプリングさせる。大きなぼかし半径やスタックされたパネルがコストを増加させる。半径を約20px以下に保つ・全画面パネルを避ける・<video>の上に置かない。web.devの公式ガイダンスは、出荷前に代表的なロースペックデバイスでテストすることだ。

グラスモーフィズムとニューモーフィズムの違いは何ですか？

ニューモーフィズム（数ヶ月早く造語された）は、ページ背景と同じフラットな色に内外のシャドウを組み合わせることで柔らかいプラスチックのエンボス形状の錯覚を作る。透明度もぼかしもない。グラスモーフィズムは半透明でぼかしたパネルを通してページ背景を見せる。これらは競合するスタイルではなく補完的だ。両方を使うデザインもある：例えばガラスカードの上のニューモーフィックボタン。

本番環境でCSSをコピーして使えますか？

はい。出力は標準プロパティを使用したプレーンCSSで、独自拡張もJavaScriptもない。ルールをスタイルシートにドロップして、ガラスのように見せたい要素にクラスを適用するだけだ。

関連ツール

CSSグラデーションジェネレーター

美しいCSSグラデーションを視覚的に作成します。

CSSシャドウジェネレーター

ライブプレビュー付きのビジュアルbox-shadowビルダー。

Border-radiusジェネレーター

CSS border-radiusを視覚的に設計します。