グラスモーフィズムをCSSで実装する方法【コピペOK・2026年版】

この記事の対象: グラスモーフィズムを実装したいフロントエンドエンジニア・Webデザイナー
読了時間: 約6分

グラスモーフィズム（Glassmorphism）は、半透明の背景＋ぼかし＋薄いボーダーを組み合わせたすりガラス風のUIスタイルです。iOSやmacOSでおなじみの表現で、Webサイトのカード・ナビゲーション・モーダルなど幅広い場面で使われています。

2026年現在、核となるbackdrop-filterは主要ブラウザすべてで対応済み。この記事では、コピペで使える基本コードから、カード・ナビゲーションの実装パターン、ダークモード対応、パフォーマンス上の注意点まで、実務で必要な情報をまとめて解説します。

グラスモーフィズムの基本CSSコード

コピペで使える最小構成

グラスモーフィズムに必要なCSSの最小構成です。このコードをそのままコピーして使えます。

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

各プロパティの役割と、デザインに合わせて調整する際の目安は以下の通りです。

-webkit-backdrop-filterはSafari対応に必須です。これを省略すると、iOS Safari・macOS Safariでぼかし効果がまったく効きません。

背景がないとグラスモーフィズムは成立しない

グラスモーフィズムは「要素の背後が透けて見える」ことで成り立ちます。単色の背景ではぼかしをかけても見た目に変化が出ません。

グラデーション、写真、動画など、色の変化がある背景の上に.glass要素を配置してください。

body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

背景画像を使う場合は、ファイルサイズにも気を配りましょう。Web画像の最適化ガイドでAVIF・WebP対応の方法をまとめています。

カード・ナビゲーションの実装パターン

料金カードの実装

料金表やサービス紹介のカードUIは、グラスモーフィズムの定番の使い方です。

<div class="glass-card">
  <h3>プレミアムプラン</h3>
  <p class="price">¥9,800<span>/月</span></p>
  <ul>
    <li>無制限アクセス</li>
    <li>優先サポート</li>
    <li>カスタムドメイン</li>
  </ul>
  <button>申し込む</button>
</div>

.glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 32px;
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.glass-card h3 {
  color: #fff;
  margin: 0 0 8px;
}

.glass-card .price {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
}

.glass-card .price span {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.7;
}

.glass-card ul {
  list-style: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
}

.glass-card button {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}

.glass-card button:hover {
  background: rgba(255, 255, 255, 0.35);
}

box-shadowを加えると、カードが背景から浮いている印象が強まります。影の色はrgba(0, 0, 0, 0.1〜0.15)の範囲が自然です。

カードを横並びにする場合は、CSS Gridレイアウトの実践パターン集のカードグリッドが参考になります。

固定ナビゲーションバーの実装

スクロール時にページの内容がナビゲーションの背後に透けて見える固定ナビは、グラスモーフィズムと相性が良いパターンです。

.glass-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 24px;
}

ポイントはsaturate(180%)の追加です。ぼかした背景の彩度が上がり、macOSのメニューバーに近いリッチな質感が出ます。Apple公式サイトのナビゲーションでも同様の手法が使われています。

ナビゲーションの横幅やパディングの設計については、Webデザインのコンテンツ幅の記事で考え方を解説しています。

ダークモードへの対応

ライトモードとダークモードの両方に対応する場合は、prefers-color-schemeで背景色の不透明度を切り替えます。

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
}

@media (prefers-color-scheme: dark) {
  .glass {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

ダークモードでは白の半透明から黒の半透明に切り替えます。ボーダーの不透明度も下げると暗い背景に馴染みます。

色の値をハードコードせず、CSS変数（カスタムプロパティ）で管理すると、テーマ切り替えの実装が楽になります。

ブラウザ対応とフォールバック（2026年）

backdrop-filterの主要ブラウザ対応状況は以下の通りです。

2026年現在、主要ブラウザすべてで対応済みです。ただし、社内システムや一部ユーザーが古いブラウザを使う可能性がある場合は、@supportsでフォールバックを用意しておくと安心です。

.glass {
  /* フォールバック: 半透明なしの濃い背景 */
  background: rgba(30, 30, 30, 0.85);
}

@supports (backdrop-filter: blur(1px)) {
  .glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

@supportsの中にbackdrop-filter対応時のスタイルを書き、外側にフォールバックの背景色を置きます。非対応ブラウザでは濃い半透明の背景が表示されるため、テキストの可読性は保たれます。

テクニック CSSだけで作るスクロールアニメーション実装ガイド【コピペOK・5パターン】 スクロールに連動するアニメーションは、ユーザー体験を大きく向上させる表現技法です。これまではJavaScriptライブラリ（Intersection Obs…

使いどころとパフォーマンスの注意点

グラスモーフィズムが効果的な4つの場面

Soreiine!!ギャラリーでも、ヒーローセクションやカードUIにグラスモーフィズムを取り入れたサイトが増えています。背景に色の変化がある箇所で使われているケースがほとんどで、逆に白背景のセクションで使っているサイトはまず見かけません。

パフォーマンスの注意点

backdrop-filterはGPUリソースを使います。適用する要素が増えるほどレンダリングコストが上がり、スクロールのカクつきにつながります。

• 1ページあたり2〜3要素に抑えるのが目安
• スクロールに連動してアニメーションする要素には使わない
• モバイルではblur値を控えめに（8px〜12px程度）する

特にスマートフォンの古い端末では処理が重くなりやすいため、スマホデザインのサイズ設計ガイドと合わせて、モバイル環境での表示確認を怠らないようにしましょう。

アクセシビリティ（コントラスト比）

半透明の背景は、下に表示される要素によってテキストの読みやすさが変わります。WCAG 2.1のコントラスト比基準（通常テキストで4.5:1以上）を満たしているか、必ずチェックしてください。

確認のポイントは以下の3つです。

• ぼかしの背後に暗い色が来た場合でも、文字が読めるか
• ぼかしの背後に明るい色が来た場合でも、文字が読めるか
• 不透明度を上げてコントラストを確保できる余地があるか

テストには、Chrome DevToolsのコントラスト比チェッカーが便利です。

リキッドグラスへの発展

グラスモーフィズムの発展形として注目されているのが、AppleがiOS 26で採用した「リキッドグラス」です。透明感に加えて、動的な反射・屈折・液体的なアニメーションが加わった表現で、グラスモーフィズムの考え方がベースになっています。

グラスモーフィズムの実装を理解していれば、リキッドグラスへの応用もスムーズに進められます。

デザイン リキッドグラス（Liquid Glass）をCSSで実装する｜作り方と使いどころ【2026年】 AppleがiOS 26で採用したリキッドグラス（Liquid Glass）。透明なガラスの反射と屈折をシミュレートし、液体のように変形するこのデザイン言語…

よくある質問

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

グラスモーフィズムは「半透明＋ぼかし」で背景が透けて見えるスタイルです。ニューモーフィズムは「凹凸の影」で要素を浮き彫りに見せるスタイルで、背景は透過しません。どちらもUIに奥行きを出す手法ですが、見た目も実装も大きく異なります。

backdrop-filterが効かないときの原因は？

よくある原因は3つです。-webkit-backdrop-filterのプレフィックスが抜けている（Safari非対応になる）、背景が単色で変化がないためぼかし効果が見えない、親要素にoverflow: hiddenやopacityが設定されていて効果が打ち消されている。まずはプレフィックスと背景の2点を確認してください。

グラスモーフィズムを使うとページが重くなる？

backdrop-filterはGPU処理を伴うため、適用要素が多いとパフォーマンスに影響します。1ページに2〜3要素程度であれば、体感できるほどの遅延は起きません。モバイル端末で大量に使う場合は、blur値を下げるか、使用箇所を絞って対処します。

ダークモードでもグラスモーフィズムは使える？

使えます。ライトモードではrgba(255, 255, 255, 0.12)のように白の半透明を使いますが、ダークモードではrgba(0, 0, 0, 0.3)のように黒の半透明に切り替えるのが基本です。prefers-color-schemeメディアクエリで出し分けてください。

まとめ

グラスモーフィズムのCSS実装に必要な知識をまとめます。

• 基本3要素: 半透明背景（rgba）+ ぼかし（backdrop-filter: blur()）+ 薄いボーダー
• 必須: -webkit-backdrop-filterプレフィックスでSafari対応
• 前提条件: 背景にグラデーションや画像がないと効果が出ない
• ブラウザ対応: 2026年は主要ブラウザすべてで対応済み。フォールバックは@supportsで
• パフォーマンス: 1ページ2〜3要素に抑える。モバイルではblur値を控えめに
• アクセシビリティ: テキストのコントラスト比（4.5:1以上）を必ず確認

コードをコピーしたら、まずグラデーション背景の上に.glassクラスを当てて動作確認してみてください。