HTML / CSS / JS
その他
CSSとJSで作る、すりガラス風リキッドナビゲーション
2026/08/03
2026/8/2
iOS風の「リキッドグラス」デザインをナビゲーションバーに落とし込んでいます。
backdrop-filter: blur()と多層のbox-shadow・insetハイライトを組み合わせることで、すりガラスのような透明感と奥行きを表現しています。
ボタンを切り替えると白い「ピル」がバウンスしながらスライドし、マウスホバー時にはカーソル位置に追従するグレア（光の反射）が浮かびます。
背景では赤と青の大きなブロブがゆっくり浮遊し、ダークモード切り替えにも対応。CSSカスタムプロパティで全体のカラーを管理しているため、テーマの変更も容易です。
Code コード
<div class="kumonosu-bg-mesh">
<div class="kumonosu-blob kumonosu-blob-1"></div>
<div class="kumonosu-blob kumonosu-blob-2"></div>
</div>
<nav class="kumonosu-liquid-nav" id="kumonosu-nav">
<div class="kumonosu-liquid-glare-container">
<div class="kumonosu-liquid-glare" id="kumonosu-glare"></div>
</div>
<div class="kumonosu-nav-items">
<div class="kumonosu-active-pill" id="kumonosu-active-pill"></div>
<button class="kumonosu-nav-btn kumonosu-active">
<div class="kumonosu-btn-content">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
</svg>
<span>Home</span>
</div>
</button>
<button class="kumonosu-nav-btn">
<div class="kumonosu-btn-content">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
</svg>
<span>Call</span>
</div>
</button>
<button class="kumonosu-nav-btn">
<div class="kumonosu-btn-content">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<line x1="8" y1="6" x2="21" y2="6"></line>
<line x1="8" y1="12" x2="21" y2="12"></line>
<line x1="8" y1="18" x2="21" y2="18"></line>
</svg>
<span>List</span>
</div>
</button>
</div>
<div class="kumonosu-divider"></div>
<button class="kumonosu-theme-btn" id="kumonosu-theme-btn">
<div class="kumonosu-theme-icon-wrapper">
<svg class="kumonosu-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="kumonosu-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</div>
</button>
</nav>:root {
--bg-color: #e5e5ea;
--blob-1: #e23636;
--blob-2: #0047ab;
--blob-opacity: 0.7;
--glass-bg: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.4);
--glass-shadow: rgba(0, 0, 0, 0.1);
--glass-highlight: rgba(255, 255, 255, 0.8);
--glass-caustic: rgba(255, 255, 255, 0.4);
--reflection-start: rgba(255, 255, 255, 0.6);
--reflection-end: rgba(255, 255, 255, 0.0);
--glare-color: rgba(255, 255, 255, 0.5);
--pill-bg: rgba(255, 255, 255, 0.7);
--pill-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.8);
--icon-color: rgba(0, 0, 0, 0.5);
--icon-active: rgba(0, 0, 0, 0.95);
--divider: rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] {
--bg-color: #000000;
--blob-1: #b11313;
--blob-2: #003380;
--blob-opacity: 0.5;
--glass-bg: rgba(30, 30, 35, 0.45);
--glass-border: rgba(255, 255, 255, 0.15);
--glass-shadow: rgba(0, 0, 0, 0.8);
--glass-highlight: rgba(255, 255, 255, 0.25);
--glass-caustic: rgba(255, 255, 255, 0.05);
--reflection-start: rgba(255, 255, 255, 0.15);
--reflection-end: rgba(255, 255, 255, 0.0);
--glare-color: rgba(255, 255, 255, 0.15);
--pill-bg: rgba(60, 60, 65, 0.8);
--pill-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.2);
--icon-color: rgba(255, 255, 255, 0.5);
--icon-active: #ffffff;
--divider: rgba(255, 255, 255, 0.15);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
background: transparent;
overflow: hidden;
}
.kumonosu-bg-mesh {
position: absolute;
inset: 0;
z-index: -1;
background: var(--bg-color);
transition: background 0.8s ease;
overflow: hidden;
}
.kumonosu-blob {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: var(--blob-opacity);
animation: kumonosu-float 20s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
will-change: transform;
}
.kumonosu-blob-1 {
width: 60vw;
height: 60vw;
top: -10%;
left: -10%;
background: var(--blob-1);
}
.kumonosu-blob-2 {
width: 55vw;
height: 55vw;
bottom: -10%;
right: -10%;
background: var(--blob-2);
animation-delay: -5s;
}
@keyframes kumonosu-float {
0% {
transform: translate(0, 0) scale(1) rotate(0deg);
}
100% {
transform: translate(5%, 10%) scale(1.1) rotate(5deg);
}
}
.kumonosu-liquid-nav {
position: relative;
display: flex;
align-items: center;
padding: 8px;
border-radius: 99px;
background: var(--glass-bg);
backdrop-filter: blur(50px) saturate(200%);
-webkit-backdrop-filter: blur(50px) saturate(200%);
box-shadow:
0 40px 80px -20px var(--glass-shadow),
inset 0 2px 3px -1px var(--glass-highlight),
inset 0 -2px 4px -1px var(--glass-caustic),
inset 0 0 0 1px var(--glass-border);
z-index: 10;
}
.kumonosu-liquid-nav::before {
content: '';
position: absolute;
top: 1px;
left: 1px;
right: 1px;
height: 46%;
border-radius: 99px 99px 24px 24px / 99px 99px 12px 12px;
background: linear-gradient(180deg, var(--reflection-start) 0%, var(--reflection-end) 100%);
pointer-events: none;
z-index: 6;
}
.kumonosu-liquid-glare-container {
position: absolute;
inset: 0;
border-radius: 99px;
overflow: hidden;
pointer-events: none;
z-index: 5;
}
.kumonosu-liquid-glare {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
background: radial-gradient(circle 90px at var(--x, 50%) var(--y, 50%), var(--glare-color) 0%, transparent 100%);
mix-blend-mode: overlay;
}
.kumonosu-liquid-nav:hover .kumonosu-liquid-glare {
opacity: 1;
}
.kumonosu-nav-items {
position: relative;
display: flex;
gap: 4px;
z-index: 3;
}
.kumonosu-active-pill {
position: absolute;
top: 0;
left: 0;
height: 44px;
background: var(--pill-bg);
border-radius: 99px;
box-shadow: var(--pill-shadow);
transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1), width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
z-index: 1;
}
.kumonosu-nav-btn {
position: relative;
background: transparent;
border: none;
padding: 0 20px;
height: 44px;
border-radius: 99px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: var(--icon-color);
cursor: pointer;
transition: color 0.3s ease;
outline: none;
z-index: 2;
}
.kumonosu-btn-content {
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.kumonosu-nav-btn:active .kumonosu-btn-content {
transform: scale(0.92);
}
.kumonosu-nav-btn.kumonosu-active {
color: var(--icon-active);
}
.kumonosu-divider {
width: 1px;
height: 24px;
background: var(--divider);
margin: 0 4px;
z-index: 3;
}
.kumonosu-theme-btn {
position: relative;
background: transparent;
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--icon-color);
cursor: pointer;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.3s ease;
}
.kumonosu-theme-icon-wrapper {
position: relative;
width: 20px;
height: 20px;
}
.kumonosu-theme-icon-wrapper svg {
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.4s ease;
stroke-width: 2.2;
}
.kumonosu-sun {
opacity: 1;
transform: rotate(0deg) scale(1);
}
.kumonosu-moon {
opacity: 0;
transform: rotate(-90deg) scale(0);
}
[data-theme="dark"] .kumonosu-sun {
opacity: 0;
transform: rotate(90deg) scale(0);
}
[data-theme="dark"] .kumonosu-moon {
opacity: 1;
transform: rotate(0deg) scale(1);
}document.addEventListener("DOMContentLoaded", () => {
const navButtons = document.querySelectorAll(".kumonosu-nav-btn");
const activePill = document.getElementById("kumonosu-active-pill");
const themeBtn = document.getElementById("kumonosu-theme-btn");
const nav = document.getElementById("kumonosu-nav");
const glare = document.getElementById("kumonosu-glare");
function updatePill(btn, smooth = true) {
if (!btn) return;
activePill.style.transition = smooth ? 'transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1), width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1)' : 'none';
activePill.style.width = `${btn.offsetWidth}px`;
activePill.style.transform = `translateX(${btn.offsetLeft}px)`;
}
const initialActive = document.querySelector(".kumonosu-nav-btn.kumonosu-active");
if (initialActive) setTimeout(() => updatePill(initialActive, false), 50);
navButtons.forEach(btn => {
btn.addEventListener("click", () => {
navButtons.forEach(b => b.classList.remove("kumonosu-active"));
btn.classList.add("kumonosu-active");
updatePill(btn);
});
});
themeBtn.addEventListener("click", () => {
const root = document.documentElement;
const isDark = root.getAttribute("data-theme") === "dark";
root.setAttribute("data-theme", isDark ? "light" : "dark");
setTimeout(() => {
const active = document.querySelector(".kumonosu-nav-btn.kumonosu-active");
if (active) updatePill(active);
}, 100);
});
window.addEventListener("resize", () => {
const active = document.querySelector(".kumonosu-nav-btn.kumonosu-active");
if (active) updatePill(active, false);
});
nav.addEventListener("mousemove", (e) => {
const rect = nav.getBoundingClientRect();
glare.style.setProperty("--x", `${e.clientX - rect.left}px`);
glare.style.setProperty("--y", `${e.clientY - rect.top}px`);
});
});Explanation 詳しい説明
仕様
このデモは、CSSのbackdrop-filterと多層のbox-shadowを活用して、すりガラス風の質感を持つナビゲーションバーを実装しています。JavaScriptは、ピルのスライド・テーマ切り替え・グレア追従の3つの機能に限定した軽量な構成です。
主な機能は以下のとおりです。
- リキッドグラス効果:
backdrop-filter: blur(50px) saturate(200%)で背景をぼかし、inset box-shadowを複数重ねてガラスのハイライト・コースティクス（光の屈折）・枠線を表現しています。::before疑似要素で上部の反射グラデーションも加えています。 - スライドピル: アクティブなボタンの背後に白い丸角ピルが表示され、ボタンを切り替えると
cubic-bezier(0.34, 1.2, 0.64, 1)のバウンスイージングでなめらかにスライドします。 - マウス追従グレア: ナビバー上にマウスを載せると、カーソル位置を中心とした
radial-gradientがオーバーレイ表示され、ガラスの光沢感を強調します。 - ライト／ダークテーマ: テーマボタンで
data-theme属性を切り替え、CSSカスタムプロパティで全カラーが一括で変化します。太陽と月のアイコンは回転＋スケールアニメーションで入れ替わります。 - 背景ブロブ: 赤と青の大きなぼかし円（
filter: blur(90px)）が20秒周期でゆっくり浮遊し、ナビバーの背景を彩ります。 - レスポンシブ対応: Flexboxレイアウトで画面中央に配置されます。
カスタマイズ
- ブロブの色: CSS変数の
--blob-1と--blob-2を変更すると、背景のブロブの色を自由に変えられます。ブランドカラーに合わせると統一感が出ます。 - ブロブの透明度:
--blob-opacityを変更すると、ブロブの存在感を調整できます。 - ガラスの透明度:
--glass-bgのアルファ値を変えると、ナビバーの透過具合が変わります。 - ぼかしの強さ:
backdrop-filter: blur(50px)の値を変更すると、背景のぼかし具合が変わります。 - ピルのアニメーション:
transitionのcubic-bezier値を変更すると、スライドの弾み方を調整できます。duration（デフォルト0.5s）で速さも変えられます。 - ナビ項目の追加: HTMLに
.kumonosu-nav-btn要素を追加するだけで項目を増やせます。ピルの幅と位置は自動計算されます。 - アイコンの変更: SVGを差し替えれば、任意のアイコンに変更できます。サイズは
width="20" height="20"で統一してください。 - テーマカラー全般:
:rootと[data-theme="dark"]内のCSS変数を変更すれば、ライト・ダーク両方のテーマカラーを一括で調整できます。 - 背景色:
--bg-colorを変更すると、ページ全体の背景色が変わります。
注意点
- backdrop-filterの対応:
backdrop-filterはFirefoxの一部旧バージョンでサポートが不完全な場合があります。-webkit-backdrop-filterもフォールバックとして記述されていますが、非対応ブラウザではガラス効果なしの半透明背景として表示されます。 - ピルの初期位置: ページ読み込み時に
setTimeout(..., 50)で初期位置を計算しています。フォントや画像の読み込みが遅れた場合、初期位置がわずかにずれる可能性があります。 - 固定レイアウト: ナビバーは画面中央に固定表示される前提の設計です。ページ上部に配置する場合は、CSSの
bodyレイアウトやナビバーのpositionを調整する必要があります。 - パフォーマンス:
backdrop-filterとfilter: blur()は GPU負荷がかかります。will-change: transformを設定していますが、低スペック端末ではブロブのアニメーションが重くなる場合があります。 - テキストラベル: ボタンにはアイコンとテキストラベルの両方を表示しています。モバイルで横幅が足りない場合は、テキストを非表示にしてアイコンのみにする調整を検討してください。
- アクセシビリティ: テーマ切り替えボタンに
aria-labelが設定されていません。実用する場合は「テーマ切り替え」等のラベルを追加することを推奨します。
