リキッドグラス（Liquid Glass）をCSSで実装する｜作り方と使いどころ【2026年】

この記事の対象: リキッドグラス風デザインをCSSで実装したいWebデザイナー・フロントエンドエンジニア
読了時間: 約10分

AppleがiOS 26で採用したリキッドグラス（Liquid Glass）。透明なガラスの反射と屈折をシミュレートし、液体のように変形するこのデザイン言語は、Web制作者の間で急速に注目を集めています。

この記事では、backdrop-filterを使った基本の実装から、カード・ナビゲーション・モーダル・ヒーローセクションの実用パターン、SVGフィルターによる屈折効果、パフォーマンス対策、読みにくくなる条件の回避基準まで、コピーして使えるコード付きで解説します。グラスモーフィズムとの違いも整理しているので、使い分けの判断にも役立ちます。

リキッドグラス（Liquid Glass）とは — 用語とCSSで再現できる範囲

Appleが2025年のWWDCで発表し、iOS 26・iPadOS 26・macOS 26に搭載されたデザイン言語が「Liquid Glass」です。日本語ではリキッドグラスと表記されます。透明度の高いガラスが光を反射し、タッチすると液体のように揺れる質感が特徴です。

Appleのネイティブ実装はGPUレベルのリアルタイムレンダリングで描画されているため、CSSだけでまったく同じ表現を再現するのは困難です。ただし、backdrop-filter＋半透明背景＋光のハイライトを組み合わせた「リキッドグラス風」の質感であれば、モダンブラウザで十分に表現できます。

この記事では上の流れに沿って、ステップごとに実装を解説していきます。

リキッドグラスの基本をCSSで実装する

リキッドグラスの核心は「透明感＋ぼかし＋光の反射」です。CSSのbackdrop-filterをベースに、3つの工夫を加えることで「ただのすりガラス」から一段上の質感に引き上げられます。

最小構成のリキッドグラスCSS

.liquid-glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

なぜこう書くのか — 3つのポイント:

• saturate(180%) をblur()に加えると、背景色の彩度が上がり、「ガラス越しに色が透けている」質感が出る。blur()だけだと灰色がかった曇りガラスにしかならない
• inset 0 1px 0 rgba(255,255,255,0.2) — 上辺にだけ白い内側シャドウを入れることで、ガラスの縁に光が当たった反射を擬似的に表現できる
• borderの半透明白 — 要素の輪郭がうっすら浮かび上がり、背景との境界に奥行きが生まれる

対応ブラウザ: Chrome 76+、Safari 9+、Firefox 103+、Edge 79+。2026年時点のモダンブラウザであればほぼ問題なく動作します。-webkit-プレフィックスはSafari向けに残しておくのが安全です。

backdrop-filterが効かない環境へのフォールバック

backdrop-filterに対応していないブラウザでは、ぼかしが一切かからず背景がほぼ素通しになります。@supportsを使い、非対応環境では不透明度を上げた塗りに切り替えるのが確実です。

.liquid-glass {
  /* フォールバック: ぼかしなしの半透明背景 */
  background: rgba(30, 30, 30, 0.85);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .liquid-glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
      0 4px 30px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

つまずきやすい点: @supportsのカッコ内に-webkit-付きのチェックも入れないと、Safari 14以前で適用されない場合があります。orで両方書くのを忘れないようにしてください。

ダークモード対応

ダークモードでは白の不透明度を下げ、ボーダーとシャドウの強さを調整します。CSS変数（カスタムプロパティ）を使えばライト/ダークの切り替えがシンプルになります。

:root {
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-highlight: rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.1);
  }
}

.liquid-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 var(--glass-highlight);
}

つまずきやすい点: ダークモードでsaturate()の値をそのまま使うと彩度が強すぎる場合があります。暗い背景ではsaturate(150%)程度に落とすと自然な仕上がりになります。

リキッドグラスとグラスモーフィズムのCSS実装の違い

「リキッドグラス」と「グラスモーフィズム」は混同されやすいですが、CSS実装のアプローチが変わるため、違いを押さえておく必要があります。

グラスモーフィズムはbackdrop-filter: blur()と半透明背景だけで完結する静的な表現です。リキッドグラスはそこに光の屈折と動的な反射の変化が加わった進化形で、CSSだけでなくSVGフィルターやJavaScriptを組み合わせて初めてAppleの表現に近づけます。

グラスモーフィズムの基本実装は別記事で詳しく解説しているので、ここでは違いの整理にとどめます。

テクニック グラスモーフィズムをCSSで実装する方法【コピペOK・2026年版】 グラスモーフィズム（Glassmorphism）は、半透明の背景＋ぼかし＋薄いボーダーを組み合わせたすりガラス風のUIスタイルです。iOSやmacOSでおな…

リキッドグラス風CSSの応用パターン4選

基本スタイルをベースに、実際のUIコンポーネントで使えるパターンを紹介します。すべてそのままコピーして動くコードです。

パターン1: スクロール連動ナビゲーション

スクロールに応じて背景のガラス感が変化するナビゲーションです。iOS 26のSafariに近い体験をWebで再現できます。

.nav-glass {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.3s ease;
  z-index: 100;
}

.nav-glass.scrolled {
  background: rgba(255, 255, 255, 0.85);
}

window.addEventListener('scroll', () => {
  const nav = document.querySelector('.nav-glass');
  nav.classList.toggle('scrolled', window.scrollY > 50);
});

Soreiine!!のギャラリーでも、スクロールに連動してナビゲーションの透明度が切り替わるサイトが増えています。コンテンツを読んでいるときは主張を抑え、操作時にしっかり存在感を出す——このバランスがリキッドグラス的なナビゲーションの要点です。

パターン2: マウス追従カード

ホバー時にマウス位置に応じて光の反射が動くカードです。radial-gradientの中心座標をCSS変数で制御することで、JSのコード量を最小限に抑えています。

.glass-card {
  position: relative;
  padding: 24px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.15) 0%,
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glass-card:hover::before {
  opacity: 1;
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

document.querySelectorAll('.glass-card').forEach(card => {
  card.addEventListener('mousemove', (e) => {
    const rect = card.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    card.style.setProperty('--mouse-x', `${x}%`);
    card.style.setProperty('--mouse-y', `${y}%`);
  });
});

実装のポイント: ::before疑似要素のサイズを200%にしているのは、マウスが要素の端にあるときでも光のグラデーションが途切れないようにするためです。pointer-events: noneで操作を妨げないことも忘れずに。

パターン3: モーダル・ダイアログ

HTML標準の<dialog>要素と組み合わせたリキッドグラス風モーダルです。::backdropにもぼかしを適用して、背景コンテンツとの境界を明確にします。

dialog.glass-modal {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 32px;
  max-width: 480px;
}

dialog.glass-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

<dialog class="glass-modal" id="modal">
  <h2>タイトル</h2>
  <p>モーダルの本文</p>
  <button onclick="this.closest('dialog').close()">閉じる</button>
</dialog>
<button onclick="document.getElementById('modal').showModal()">開く</button>

つまずきやすい点: ::backdropのbackdrop-filterはChrome 76+とEdge 79+で動作しますが、Firefoxでは::backdropへのフィルター適用がうまく効かないバージョンがあります。背景のぼかしが必須でなければ、::backdropはbackgroundのみにしておくのが安全です。

パターン4: ヒーローセクション

背景画像の上にリキッドグラス風のテキストエリアを配置する定番パターンです。写真の世界観を活かしながらテキストの可読性を確保できます。

.hero {
  position: relative;
  background: url('hero-bg.jpg') center / cover;
  min-height: 80vh;
  display: grid;
  place-items: center;
}

.hero-content {
  padding: 48px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  max-width: 600px;
  text-align: center;
}

Soreiine!!のギャラリーに掲載されているサイトでも、ヒーローセクションに半透明のオーバーレイを重ねた構成は定番になりつつあります。写真のインパクトを消さずにテキストの視認性を確保する手法として、コーポレートサイトやブランドサイトとの相性が良い表現です。サイト制作の方向性については「コーポレートサイトの参考事例8選｜デザインと構成のポイント【2026年】」も参考になります。

SVGフィルターで屈折効果を加えるCSS実装

CSS単体では難しい「屈折（歪み）」は、SVGのfeTurbulence＋feDisplacementMapで再現できます。リキッドグラスの「液体っぽさ」を演出する上級テクニックです。

<svg style="position: absolute; width: 0; height: 0;">
  <filter id="liquid-distortion">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.015"
      numOctaves="3"
      result="noise"
    />
    <feDisplacementMap
      in="SourceGraphic"
      in2="noise"
      scale="6"
      xChannelSelector="R"
      yChannelSelector="G"
    />
  </filter>
</svg>

.liquid-distortion:hover {
  filter: url(#liquid-distortion);
  transition: filter 0.3s ease;
}

パラメータの調整ガイド:

つまずきやすい点:

• SVGフィルターは描画コストが高い。適用要素のサイズが大きいとフレームレートが目に見えて落ちる
• iOSのSafariではSVGフィルターの描画結果がデスクトップと異なる場合がある。実機確認は必須
• 常時適用ではなくホバー時だけ有効にするなど、使いどころを限定するのが実用的

SVGを使ったリッチな表現の基礎は「SVGアニメーションの作り方｜軽量でリッチな演出【コード付き】」で解説しています。

CSSアニメーションで動きのあるリキッドグラスを表現する

リキッドグラスの特徴のひとつ「光の揺らぎ」は、@keyframesでグラデーション位置を移動させることで軽量に表現できます。

shimmer（光の移動）効果

.liquid-glass-animated {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.liquid-glass-animated::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0%, 100% { background-position: -100% 0; }
  50% { background-position: 100% 0; }
}

なぜこう書くのか: background-size: 200%にしてグラデーション全体を左右にスライドさせることで、光が表面を横切るような動きを作っています。ease-in-outで緩急をつけると機械的な印象が薄れ、自然な揺らぎに見えます。

このshimmer効果はbackdrop-filterと組み合わせても描画負荷は小さく、モバイルでも安定して動作します。

スクロール連動で表示タイミングを制御したい場合は、Intersection Observer APIやGSAPのScrollTriggerが使えます。具体的なコードは「GSAPで作るリッチなWebアニメーション入門【2026年版・コード付き】」を参照してください。

リキッドグラスが読みにくくなる条件と回避の基準

リキッドグラス風のデザインは見た目のインパクトがある一方で、使い方を誤るとテキストの視認性が一気に下がります。「きれいだけど読めない」を避けるための条件と基準を整理します。

背景との組み合わせで崩れるケース

リキッドグラスが映えるのは、背景にある程度の色味とコントラストがあるときです。以下の条件では効果が薄れるか、逆効果になります。

• 白や淡い単色の背景 — ぼかしの効果がほぼ見えず、ガラス要素だけが浮いたように見える。背景にグラデーション、写真、パターンのいずれかがないとリキッドグラスの良さは出ない
• 細かいテキストが多い背景 — ぼかしきれず文字の残像が透けて、前面のテキストと干渉する。ブログ記事の本文上にガラス要素を重ねるのは避けたほうが良い
• 高彩度の背景 — saturate(180%)との掛け合わせで色が飽和し、テキストとのコントラスト比が維持できなくなる。彩度の高い写真が背景の場合はsaturate()を120%程度まで下げる

可読性を守るための具体的な基準

backgroundの不透明度を上げすぎるとガラス感が消えるため、rgba()の不透明度は実際の背景を当てた状態で調整するのがおすすめです。スマホ実機での表示確認も欠かせません。画面サイズ別の設計については「スマホデザインのサイズ設計ガイド｜2026年の推奨値と実装のコツ」を参照してください。

パフォーマンスとアクセシビリティの対策

リキッドグラス風スタイルはGPUリソースを使うため、描画負荷とユーザー補助の両面で手当てが必要です。

パフォーマンスを守る3つのルール

backdrop-filterはブラウザのコンポジットレイヤーで処理されるため、適用する要素が増えるほどフレームレートに影響します。

1. 適用要素は1画面あたり3〜4個までに抑える
2. モバイルではblur()の値を下げる（20px → 10px）
3. will-change: backdrop-filterはアニメーション直前に付与し、終了後に外す

@media (max-width: 768px) {
  .liquid-glass {
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
  }
}

パフォーマンス計測と改善の全体像は「Core Web Vitalsスコア改善の実践テクニック【2026年版】」にまとめています。ヒーロー画像など大きな画像を背景に使う場合は、画像自体の最適化も重要です。フォーマット選定や圧縮の手順は「Web画像の最適化ガイド｜AVIF・WebP対応と軽量化テクニック【2026年版】」を参考にしてください。

アクセシビリティを確保するCSS

半透明の背景は、下のコンテンツ次第でテキストのコントラストが不安定になります。透明効果をオフにできる仕組みと、アニメーション停止の両方を用意しましょう。

/* 透明効果の低減を希望するユーザー向け */
@media (prefers-reduced-transparency: reduce) {
  .liquid-glass,
  .liquid-glass-animated {
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* モーション低減を希望するユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .liquid-glass-animated::after {
    animation: none;
  }
}

prefers-reduced-transparencyは2026年時点でSafari 16.4+とChrome 118+が対応しています。非対応ブラウザでは無視されるだけなので、書いておいて損はありません。アクセシビリティ対応の基本は「Webアクセシビリティ対応ガイド｜最低限やるべき5つのポイント【2026年版】」で体系的に解説しています。

よくある質問

リキッドグラスとグラスモーフィズムの違いは何ですか？

グラスモーフィズムはbackdrop-filter: blur()と半透明背景で完結する静的な表現です。リキッドグラスはそこに光の屈折・動的な反射・液体のような変形が加わった進化形で、CSS単体ではなくSVGフィルターやJavaScriptを組み合わせて表現します。

backdrop-filterが効かないブラウザではどう表示されますか？

ぼかしが一切かからず、backgroundに設定した半透明の色だけが表示されます。不透明度が低い（0.08など）設定だとほぼ透明になってテキストが読みにくくなるため、@supportsで非対応環境には不透明度を高めたフォールバックを用意してください。具体的なコードはこの記事の「backdrop-filterが効かない環境へのフォールバック」で紹介しています。

リキッドグラスをモバイルで使うとパフォーマンスは大丈夫ですか？

backdrop-filter: blur()だけであれば、1画面3〜4要素程度なら目立った遅延は出ません。ただしblur()の値が大きいほどGPU負荷が上がるので、モバイルでは20pxを10pxに下げるのが実用的です。SVGフィルターは描画コストが高く、モバイルではフレームレートの低下が顕著になります。ホバー時だけ適用するなど、使いどころを限定してください。

リキッドグラスに合う背景の条件は？

色味とコントラストがある程度ある背景が適しています。グラデーション、写真、イラストなどが背景にあるとガラスの透明感が引き立ちます。逆に、白や淡い単色の背景ではぼかし効果がほぼ見えません。高彩度の写真を使う場合はsaturate()の値を控えめ（120〜150%）にすると色の飽和を防げます。

まとめ

AppleのリキッドグラスをWebでそのまま再現するのは困難ですが、CSSのbackdrop-filterをベースに工夫を重ねることで「リキッドグラス風」の質感は十分に表現できます。

実装のポイントを整理します。

• 基本: backdrop-filter: blur() saturate() ＋ 半透明背景 ＋ inset box-shadowで透明感と反射を表現。@supportsで非対応環境のフォールバックも用意する
• 応用: ナビゲーション・カード・モーダル・ヒーローセクションの4パターンで、そのままコピーして使えるコードを掲載した
• 屈折: SVGのfeTurbulence ＋ feDisplacementMapで歪み効果を追加できるが、描画コストが高いのでホバー時に限定するのが現実的
• 可読性: 白い単色背景ではガラス感が出ない。テキストのコントラスト比4.5:1以上を実背景で確認し、1画面あたりのガラス要素は3〜4個に抑える
• 対策: モバイルではblur()を控えめにし、prefers-reduced-transparencyとprefers-reduced-motionでアクセシビリティに対応する

まずは基本のスタイルを1箇所——ナビゲーションやカードに適用するところから試してみてください。パフォーマンスへの影響を実機で確認しながら、段階的に導入を進められます。