24 CSS Liquid Glass Navbars

Liquid Glass is Apple's design language announced at WWDC 2025 (June 9-13) that ships across iOS 26, iPadOS 26, macOS Tahoe, watchOS 26, tvOS 26 and visionOS — the biggest UI overhaul since iOS 7 in 2013. The core visual principle: UI surfaces behave like real physical glass — they refract the content beneath them (not just blur it), they catch specular highlights from an implied light source that responds to device orientation, and they distort in liquid-like ways when the user interacts. It's the aesthetic Vision Pro shipped with in 2024, now backported to every Apple platform. For navigation specifically, that means: floating capsule tab bars that shrink on scroll to reclaim screen space, translucent menu bars that blend into the desktop wallpaper, Dynamic Island expansions that morph fluidly between compact and expanded states, and sidebar rails that reflow into bottom tab bars on narrow viewports. Every premium SaaS product targeting Apple-first customers (Superhuman, Linear, Notion, Framer, Cron, Raycast, Arc Browser, Cursor) has adopted or is adopting this aesthetic because their tier-1 (US / UK / CA / AU / DE) user base spends their day inside iOS 26 and macOS Tahoe. Web products that don't adapt look dated fast — the same way iOS 7's flat design retired every skeuomorphic app in 2013. This collection ships the 24 navigation patterns that map to real Google search demand from front-end engineers building these products.

Two production approaches ship here. Simple approach (most demos): layered backdrop-filter — backdrop-filter: blur(24px) saturate(180%) on the navbar surface, plus a subtle inner-highlight box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), plus a ring-1 ring-white/40 outer stroke that catches the ambient light. This produces the “frosted with specular rim” look that Apple's Control Center and iOS 26 tab bar use. Advanced approach (Demo 03 Safari toolbar): SVG <filter> with <feTurbulence baseFrequency="0.02"> generating a subtle noise map, fed into <feDisplacementMap scale="8"> that physically warps the underlying pixels. Reference the filter with filter: url(#nb-03-refract) on a decorative ::before glass layer that sits below the toolbar controls (higher z-index) so text stays sharp while the pixels behind the glass genuinely bend. Chrome, Safari (with -webkit-), and Firefox 103+ all support SVG filters on HTML for years. GPU cost is real (~4-8ms per composite frame) so cap the refraction filter to hero surfaces, not every list item. Use contain: layout paint + isolation: isolate on the navbar wrapper to fence the expensive blur so it never repaints the whole page — this is the INP-safe pattern Demo 22 (Performance-Tuned Navbar) documents in detail.

SaaS marketing sites (Stripe / Linear / Vercel / Framer / Superhuman) — Demo 07 (Tailwind Liquid Glass Navbar) is the copy-paste starter with utility classes ready to drop into a Next.js + Tailwind stack; Demo 09 (Next.js Sticky Glass Header) ships the no-flash SSR pattern with the backdrop-blur-safe hydration; Demo 13 (Scroll Opacity Sticky Navbar) is the transparent-over-hero pattern every Vercel-style landing uses; Demo 23 (Minimalist Dual-Border Header) is the Notion / Read.cv editorial register. Fintech (Coinbase Pro / Robinhood Gold / Ramp / N26 / Trade Republic) — Demo 04 (visionOS Glass Navbar) is the dark smoked-glass panel premium fintech dashboards ship; Demo 18 (Reflective Glass Sidebar) is the dashboard-first left rail with the dynamic accent-colour rim; Demo 21 (Light / Dark Mode Navbar) is the token-driven light/dark implementation German fintech (N26 / Trade Republic / Personio) ships. Gaming / streaming portals (Steam / Epic / Twitch) — Demo 15 (Cursor-Warp Interactive Nav with GSAP) is the pointer-tracked warp that gaming portals use to signal “this is a premium experience”; Demo 16 (Animated Gradient Blobs Navbar) is the ambient-motion aesthetic that reads as premium without hurting Core Web Vitals. Web3 wallet-connect (Uniswap / OpenSea / Phantom / Rainbow) — Demo 08 (React Responsive Navbar Burger) with wallet-picker state and Demo 11 (CSS Variables Theme Generator) for per-chain accent theming. E-commerce checkout (Shopify / Stripe Billing) — Demo 05 (Bottom Accessory / Mini-Player Bar) for the sticky Add-to-Cart accessory and Demo 17 (Sliding Capsule Active Tab) for the checkout stepper. Dev tools (Cursor / Raycast / Arc Browser) — Demo 02 (macOS Tahoe Menu Bar) is the native-desktop-parity register; Demo 06 (Dynamic Island Navigation) is the command-palette morph pattern. Enterprise / accessibility-first — Demo 20 (High-Contrast Accessible Navbar) with WCAG 2.2 SC 1.4.3 AA compliance for procurement checkboxes; Demo 19 (Firefox Fallback Navbar) with the @supports not (backdrop-filter) graceful-degrade pattern for browsers where the effect isn't supported. Responsive / mobile-first — Demo 01 (iOS 26 Floating Tab Bar) is the shrink-on-scroll capsule; Demo 24 (Responsive Sidebar → Bottom Tabs) uses container queries to reflow one nav into two orientations without duplicating markup. Every demo is hand-coded CSS with optional vanilla JS — copy the HTML + CSS panels, drop them into any stack, ship.

Three disciplines apply everywhere. First, layout reservation — every navbar reserves its final box before render so Cumulative Layout Shift stays 0. Fixed / sticky bars use position: fixed or position: sticky with explicit top / bottom offsets so they never push page content. Bars that animate their size (Demo 01 iOS 26 shrink-on-scroll, Demo 06 Dynamic Island expand) animate padding and label max-width — not the containing block — so surrounding content stays put. Second, GPU-safe animation properties only — every transition animates transform, opacity, filter, and backdrop-filter. Never width, height, margin, padding (in the containing-block sense), or top / left — those trigger the layout + paint pipeline on every frame and destroy Interaction to Next Paint scores on real mobile hardware. Third, paint isolation — every navbar sits in a contain: layout paint + isolation: isolate wrapper so the expensive backdrop-filter blur is fenced to its own compositor layer and never repaints the whole page. Demo 22 (Performance-Tuned Navbar) documents this pattern with proper will-change: transform hints applied only during active interaction (not permanently, which prevents Chromium's raster optimiser from ever letting go of the layer). Result: every demo lands under Google's 200ms INP threshold on a mid-tier Android device even with the heaviest backdrop-filter stack active. Refraction demos (Demo 03 Safari toolbar) additionally cap the SVG filter to hero surfaces because SVG filters on HTML elements have a real ~4-8ms per-composite-frame cost — acceptable on a single navbar, not acceptable on every list item in a scrollable feed.

Glass has a real accessibility problem: text over a translucent surface fails contrast when the underlying content is bright, and the frosted blur reads as visual noise for users with cognitive or low-vision needs. Every demo here addresses all three concerns explicitly. Contrast — text sits on a solid-enough tint that WCAG 1.4.3 AA (4.5:1 for normal, 3:1 for large-text) passes over the darkest realistic backdrop. The trick is the backdrop-filter: saturate(1.8) component: it boosts saturation of what's behind the glass, which lets the text sit on a lower opacity glass surface without losing readability. Demo 20 (High-Contrast Accessible Navbar) ships the AAA-target reference with proper text-shadow rescue for bright backdrops. Motion — every animated demo respects @media (prefers-reduced-motion: reduce) with an appropriate fallback: static-poster arrivals for the shrink-on-scroll bars (Demo 01), instant-swap active-state changes for the sliding capsule tab (Demo 17), and disabled ambient motion for the gradient-blob backgrounds (Demo 16). Transparency — Apple introduced prefers-reduced-transparency in Safari 17 / iOS 17 alongside the new Reduce Transparency system setting; every demo checks it and swaps to solid tint when the user opts out. Keyboard + landmark semantics — every navbar is a real <nav> or <header> landmark, the active link carries aria-current="page", every interactive is keyboard-reachable with a visible :focus-visible ring, every icon-only control has an aria-label, and every touch target hits the WCAG 2.5.5 44×44px minimum. This is the accessibility floor that Section 508 (US federal procurement), EN 301 549 (EU / Germany public sector), AODA (Ontario), DDA (Australia), and the European Accessibility Act (June 2025) all require.

Baseline support is broad but the advanced primitives cluster in modern engines. backdrop-filter — Chrome 76+, Safari 14+ (with -webkit- prefix), Firefox 103+. Every demo includes the -webkit-backdrop-filter fallback so Safari 14-17 users still get the frost. Demo 19 (Firefox Fallback Navbar) ships the canonical @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) graceful-degrade block that swaps to a solid tint fill — the pattern to copy for anywhere backdrop-filter isn't guaranteed. SVG <filter> on HTML — universal support across every modern Chrome, Safari, Firefox. Demo 03 (Safari toolbar with refraction) works everywhere; the per-composite-frame GPU cost is the practical ceiling, not browser support. Container queries (@container) — Chrome 105+, Safari 16+, Firefox 110+. Demo 24 (Responsive Sidebar → Bottom Tabs) uses @container (max-width: 560px) to reflow one nav into two orientations; browsers without container query support fall back to viewport-based @media queries. @property typed custom properties — Chrome 85+, Safari 16.4+, Firefox 128+. Used in Demo 15 (Cursor-Warp) for the smooth animation of the --x / --y pointer coordinates; older browsers fall back to instant jumps (still functional, just less silky). :has() — Chrome 105+, Safari 15.4+, Firefox 121+. Used in Demo 17 (Sliding Capsule Active Tab) to drive the capsule position from a sibling radio button's :checked state without JavaScript. Every advanced-primitive demo carries an inline @supports fallback so older browsers get a working version, not a broken one. Tier-1 (US / UK / CA / AU / DE) traffic on evergreen browsers gets the full experience; the long tail on IE-era enterprise browsers gets the graceful degrade.

Four honest trade-offs. Bundle cost — Aceternity UI, Magic UI, and shadcn's glass components all ship as React components on top of Framer Motion (60KB+ once you include React DOM), Radix UI primitives (~40KB), and their own utility CSS. That's ~120-150KB gzip just to render a glass navbar. Every demo in this collection is either 100% pure CSS (17 of 24) or CSS + under 60 lines of vanilla JavaScript (7 of 24) — the entire collection totals under 15KB uncompressed of framework-free code. Framework lock-in — Aceternity requires React. Magic UI requires React. shadcn requires React + Radix + Tailwind + a specific project structure. Framer Motion requires React and a specific state model. These 24 demos are framework-agnostic — the HTML + CSS + JS panels drop into any stack (Astro, Next.js, SvelteKit, Vue, plain HTML, Ruby on Rails ERB, Django templates) with zero adaptation. License and cost — Aceternity Pro is $299+/year for their full glass collection. Magic UI Pro is a subscription. shadcn is free but ties you to their specific dependency tree. Every demo here is MIT licensed, free forever, no attribution required (though a link back is always appreciated). Accessibility floor — the popular React glass libraries are rendering-first, accessibility-second. Some of Aceternity's canvas-based glass effects fail every WCAG contrast test on bright backdrops. Every demo here ships with keyboard navigation, focus-visible rings, aria-current, aria-label on icon-only controls, prefers-reduced-motion + prefers-reduced-transparency fallbacks, and passes WCAG 2.2 SC 1.4.3 AA on the darkest realistic backdrop. That said — if you're already on React and don't need the accessibility floor or the zero-bundle guarantee, Aceternity is a reasonable choice for prototyping. If you're on Tailwind, the CSS ports cleanly — backdrop-blur, bg-white/15, ring-1 ring-white/40, and arbitrary values like backdrop-blur-[24px] cover most of the utility mapping; SVG filters and named keyframes belong in tailwind.config.js under extend.keyframes + extend.animation.

Yes on both. Every navbar is MIT licensed — free for personal and commercial projects, no attribution required (though a link back to codefronts.com is always appreciated). Every demo is plain HTML + CSS + optional vanilla JS with no build step, no framework wrapper, no dependencies. Drop the HTML into a React component's JSX (with className instead of class), a Vue single-file component's template, a Svelte component, an Astro island, or a SvelteKit page — the CSS ships as a scoped module, an inline <style> block, or a Tailwind arbitrary-value paste (each demo's Tailwind field is the Tailwind translation). Server-side rendering — every demo renders correctly on the server without hydration flash. Demo 09 (Next.js Sticky Glass Header) specifically documents the no-FOUC pattern for App Router streaming SSR with backdrop-blur. Content-Security-Policy — demos with strict CSP (script-src 'self' without 'unsafe-inline') work by default because no demo uses inline onclick handlers; the JS runs from external files that the CSP allowlist can permit. React StrictMode double-mount is safe on every demo — the JS handlers use AbortController for cleanup or are pure event delegation. Vue 3 v-model bindings work on the demos with form controls (theme picker, wallet-connect state). Angular, Blazor, HTMX, Turbo, Rails ERB, Django, and Laravel Blade all work — the HTML + CSS + JS is framework-agnostic. Tailwind users: the CSS translates to utility classes cleanly — backdrop-filter: blur(24px) saturate(180%) maps to backdrop-blur-[24px] backdrop-saturate-[1.8], background: color-mix(in oklab,white 16%,transparent) maps to bg-white/15, capsule shapes to rounded-full. SVG <filter> definitions and named custom keyframes belong in tailwind.config.js under extend.keyframes + extend.animation or a small @layer utilities block.