Glass pill nav

Desktop nav rendered as a single rounded glass pill with frosted background and per-link rounded-pill active state.

Navigation Captured JS-free

Use when — sitting nav over a hero image or video. The glassmorphism container gives it presence without an opaque bar. Don't use over a flat solid background — the blur effect has nothing to blur, so the visual disappears.

Live demo

The container — the "glass"

.glass-nav ul {
  display: flex;
  gap: 0.15rem;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

The trick: a barely-visible white tint (0.04 opacity) + a thin white border (0.06 opacity) + backdrop-filter: blur. Each of those is too subtle alone; together they read as a clean glass surface.

The active link — solid pill with brand color

.glass-nav a.is-active {
  color: var(--cream);
  background: rgba(200,16,46,0.85);
  box-shadow: 0 4px 14px rgba(200,16,46,0.4);
}

Variants worth considering

Active state from scroll-spy — combine with IntersectionObserver to toggle .is-active based on which section the user is in. The active pill seems to "travel" through the nav.

Light theme version — flip to background: rgba(0,0,0,0.04) + dark border + dark text for use on light hero images. Same idea, inverted palette.

Animated active background — instead of swapping colors, position an absolute "indicator" element behind the active item and animate its transform: translateX as you move between items. Smooth pill-slide effect, ~20 lines of JS.

Source: Chevy 55 desktop header nav (user-uploaded HTML, 2026-05-18).