11 CSS Glassmorphic Sticky Navbars

A glassmorphic navbar is a sticky navigation header that behaves like a physical pane of frosted glass — it lets the colour and content underneath show through in a softened, saturated form rather than sitting on a solid opaque fill. The mechanism is three CSS declarations working together: a semi-transparent background (typically rgba(255,255,255,.5) on light themes or rgba(10,12,20,.6) on dark), a backdrop-filter: blur(16px) saturate(180%) that samples the pixels behind the pane and both softens and over-saturates them, and a 1px hairline border in rgba(255,255,255,.6) so the pane has a visible edge. Without any one of the three, the effect collapses — plain blur() without saturate() looks grey and dead, and a translucent fill without a border reads as a washed-out box rather than a physical surface. Every demo in this collection ships all three plus a -webkit-backdrop-filter prefix for older Safari. A regular sticky header sits on a solid fill and hides everything underneath; a glassmorphic sticky header stays present as a legible navigation surface while letting the imagery, gradient, or scrolling content behind it read as part of the brand. Premium SaaS marketing sites (Stripe, Linear, Vercel, Superhuman, Framer), fintech dashboards (Coinbase, Robinhood, Ramp, N26), Web3 marketplaces, healthcare booking flows, insurance quote comparators, and legal-firm homepages all use this pattern in 2026-2027 to signal “this is a premium, current, well-crafted product” without having to say it in prose. This collection ships 11 production-ready variants covering every major flavour: the workhorse SaaS header (Demo 01), the scroll-triggered frost (Demo 02), the dark cyberpunk register (Demo 03), the floating island pill (Demo 04), the glass-on-glass mega menu (Demo 05), the mobile off-canvas drawer (Demo 06), the Core Web Vitals baseline (Demo 07), the animated conic-gradient border (Demo 08), the WCAG-AA accessible build (Demo 09), the React / Next.js + Framer Motion pattern (Demo 10), and the minimalist portfolio strip (Demo 11).

Demo 02 in this collection ships the modern answer: CSS scroll-driven animations via animation-timeline: scroll(nearest). The header is position:sticky; top:0 inside its scroll container. A keyframe animation defines the two states — from transparent (no fill, no blur, light text over the dark hero) and to frosted (translucent white fill, backdrop-filter: blur(14px) saturate(170%), dark text). Instead of a duration, the animation gets linked to scroll with animation-timeline: scroll(nearest). As the user scrolls, the browser interpolates the animation's progress from the actual scroll offset, so 0% scroll = transparent and 100% (past the hero) = fully frosted. It runs entirely on the compositor: no scroll event handler, no requestAnimationFrame loop, no querySelector on every frame, nothing to tank Interaction to Next Paint. animation-range: 0 200px confines the whole transition to the first 200px of scroll so the bar has fully frosted by the time the hero leaves the viewport. This is the pattern the CSS spec was designed for. For older browsers (before Chrome 115 / Firefox 129 / Safari 26), the fallback pattern lives in the JS tab: a 1px sentinel element inserted at the top of the hero, watched by an IntersectionObserver, toggles an .is-stuck class on the header. The same CSS keyframe values are duplicated on .is-stuck so the visual result is identical. Detection is if (!CSS.supports('animation-timeline: scroll()')) before installing the observer. This is the honest progressive enhancement pattern that ships to production. The alternative — a scroll event handler that reads window.scrollY on every frame and imperatively toggles a class — was the standard 2018-2023 pattern and is still what most Tailwind tutorials teach, but it is measurably slower, tanks INP scores on real mobile hardware, and is exactly what the scroll-driven-animations spec was written to replace. This collection ships the modern spec-first version and treats the JS handler as a fallback, not a default.

The double-blur bug is the single most common trap developers hit when building glass dropdowns, and Demo 05 in this collection is engineered specifically to dodge it. The bug: when you nest a backdrop-filter element inside another backdrop-filter element, the child's filter samples its parent's already-blurred output rather than the underlying page. You get a compound frost that looks muddy, sometimes clips at the edges, and reads as broken. The fix is structural, not stylistic: the dropdown panels must NOT be children of the glass bar's painted surface. They must be absolutely-positioned siblings, anchored to each menu <li>, each establishing its own stacking context so its backdrop-filter samples the actual page underneath. Both the bar and each panel end up frosting the same real content at the same strength — no compounding. In this collection's Demo 05, the markup is a flex <header> containing the <nav>, and inside each menu item, the .gn-05-mega or .gn-05-drop panel is position: absolute; top: calc(100% + 8px) — anchored to the trigger, sitting outside the bar's blur surface. Open/close is pure CSS: the panel lives at opacity: 0; visibility: hidden and reveals on both li:hover and li:focus-within, so mouse users and keyboard users get identical behaviour (tabbing into a link inside the panel keeps it open — the exact accessibility contract WCAG 2.4.11 requires for hover-driven UI). The entrance animation uses @starting-style plus transition-behavior: allow-discrete, the modern way to transition an element from display: none — without both properties, the panel pops in with no transition. Another trap the demo avoids: a blurred parent with overflow: hidden will clip the dropdown at the bar's edge — keep the bar's overflow visible and let the panel escape freely. This is the copy-paste-ready glass mega-menu pattern that Aceternity's paid version ships, in plain CSS, with no React or Radix dependency.

Glass has a real accessibility problem — translucent text over a random photo routinely fails WCAG 1.4.3 AA (4.5:1 contrast for normal body text), and the frosted blur reads as visual noise for users with cognitive or low-vision needs. Demo 09 in this collection is the copy-paste reference that clears an accessibility audit. Three disciplines apply. First, contrast is guaranteed by the fill opacity, not the blur. The frosted pane never drops below the fill's own contrast with the text — set the fill opaque enough (typically rgba(255,255,255,.7) or higher on light themes) that even the lightest patch of the underlying gradient stays legible. Never trust the blur alone; a scroll can put a nearly-white section behind the bar and tank the ratio. Second, a whisper-thin text-shadow gives every glyph a subtle halo so edges stay crisp against light patches — the shadow is polish, not the fix for a fundamentally low ratio. Third, and critically, an @supports not (backdrop-filter: blur(1px)) block replaces the translucent fill with a fully opaque bar for browsers where the effect isn't available. Ship this or a meaningful slice of users get white-on-random-photo text; this single @supports declaration is the most-skipped and most-important line in accessible glass. Focus states also need to survive the blur: use a high-contrast double outline (dark inside, light outside via box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px oklch(0.4 0.12 175)) so the ring reads against any background the glass might sample. Motion respects the user's system settings with @media (prefers-reduced-motion: reduce) — every animation in this collection is guarded. Apple's 2023 prefers-reduced-transparency media query is honored via @media (prefers-reduced-transparency: reduce) in the accessible build so users who've opted out of translucency in iOS 17+ or macOS Sonoma+ get a solid tint instead of the frost. Semantic HTML lands the rest — a real <nav aria-label landmark, aria-current="page" on the active link, 44×44px minimum touch targets (WCAG 2.5.5), an aria-expanded pattern for the mobile drawer (Demo 06 documents the upgrade from checkbox-hack to <button aria-expanded> in the gotchas), and descriptive aria-label on every icon-only control. This is the accessibility floor that Section 508 (US federal procurement), EN 301 549 (EU / German public sector), AODA (Ontario), DDA (Australia), and the European Accessibility Act (June 2025) all require.

The short answer: not if you follow three disciplines, and every demo in this collection follows all three. Demo 07 is the deliberately-boring, maximally-performant baseline the other demos build on top of. First, use position: sticky, not JavaScript. The browser pins the header natively: no scroll listener, no requestAnimationFrame loop, nothing to block the main thread. Interaction to Next Paint (INP) stays low because there is no JS to run. Second, backdrop-filter composites on the GPU, so scrolling stays at 60fps even as the blur re-samples the moving content behind it. The one honest caveat: the blur forces a new stacking context and can be paint-heavy over very large scroll areas — keep the blur radius modest (12-16px is the sweet spot; 24px starts to cost frames on low-end Android; 32px+ is measurable) and keep the header small. Measure with Chrome DevTools' Performance panel over a long scrolling session on a mid-tier device, not on your MacBook Pro. Third, the fixed-height sticky bar (declared height, not height: auto) contributes zero Cumulative Layout Shift because it reserves its box before the first paint. There is no hydration flicker, no font-swap reflow, no layout jump. Beyond those three, some further tuning: apply contain: layout paint and isolation: isolate on the navbar wrapper to fence the expensive backdrop-filter to its own compositor layer so it never repaints the whole page; add content-visibility: auto to long sections below the header to cut initial paint cost further; if you must shrink the header on scroll, prefer the CSS animation-timeline: scroll() approach from Demo 02 over a JS scroll handler; use will-change: transform only during active interaction (not permanently — Chromium's raster optimiser needs to be allowed to release the layer). Result: every demo in this collection lands under Google's 200ms INP threshold and 0.1 CLS threshold on a mid-tier Android device with the heaviest backdrop-filter stack active, verified in a real Lighthouse run. If you're seeing performance regressions from your current glass header, ninety percent of the time the cause is a JS scroll handler you can throw away by adopting Demo 02's pure-CSS pattern, or a backdrop-filter radius set higher than 20px.

Demo 06 in this collection ships the 100% JavaScript-free version and documents the exact upgrade path for production. The pure-CSS mechanism uses the checkbox-hack: a visually-hidden <input type="checkbox"> whose <label> is the hamburger icon. When the checkbox is :checked, a general-sibling combinator selector reveals the scrim and slides the drawer in via transform: translateX(0). Zero script for the whole open/close mechanic. The scrim is the star of the visual: it covers the viewport with backdrop-filter: blur(16px) plus a faint dark tint, so instead of dimming the page to grey it melts it into frosted colour that reads as depth. The drawer itself is a second glass surface sliding in from the left (or the right — start it at translateX(100%) and anchor right: 0 to mirror). Both surfaces use transform (compositor-friendly, no layout) rather than left or margin-left so the slide stays smooth even during heavy scroll. Accessibility caveats and the production upgrade: the checkbox-hack has no focus trap (a keyboard user can Tab out of the drawer and land on hidden page content behind the scrim), no Escape-to-close, and screen readers announce the checkbox as “checkbox, unchecked” rather than as an expanded/collapsed disclosure. For a real product, upgrade the checkbox to a <button aria-expanded="false" aria-controls="mobile-nav">, add ~20 lines of vanilla JS to (1) trap focus inside the drawer while it's open via a keydown handler on Tab / Shift+Tab, (2) close on the Escape key, (3) close on scrim click, (4) restore focus to the trigger button when closed, and (5) freeze body scroll with document.documentElement.style.overflow = 'hidden' and restore on close. The visual layer stays byte-for-byte identical — only the accessibility infrastructure gets upgraded. This is the pattern that Adobe Spectrum, Material Web, Radix UI, and WAI-ARIA Authoring Practices all specify for the disclosure / dialog / drawer variant. Additional gotcha to know: position: fixed inside a transformed or filtered ancestor is positioned relative to that ancestor, not the viewport — this collection's Demo 06 scopes the drawer to its stage on purpose. For a real full-viewport drawer, place the checkbox + scrim + drawer as direct children of <body>, not nested inside a transformed component tree. And give the drawer a solid-enough fill (55-65% opacity or higher) so the link text stays legible when the drawer sits over a busy page — pure blur without opacity isn't enough.

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 gzip 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 (9 of 11) or CSS plus under 40 lines of vanilla JavaScript (2 of 11) — the entire collection totals under 12KB uncompressed of framework-free code. If your product is a Next.js SaaS on Tailwind, the CSS ports cleanly: backdrop-filter: blur(16px) saturate(180%) maps to backdrop-blur-xl backdrop-saturate-150 or the arbitrary-value form backdrop-blur-[16px] backdrop-saturate-[1.8], background: rgba(255,255,255,.5) maps to bg-white/50, and the 1px hairline maps to border border-white/60. Demo 01's specific Tailwind translation is documented in its customization field. Framework lock-in — Aceternity requires React. Magic UI requires React. shadcn requires React + Radix + Tailwind + a specific project structure. These 11 demos drop into any stack (Astro, Next.js, SvelteKit, Vue, plain HTML, Rails ERB, Django templates) with zero adaptation — the HTML + CSS + optional JS panels are the whole delivery. License and cost — Aceternity Pro is $299+/year for their full glass collection at the time of writing (2026). Magic UI Pro is a subscription. shadcn is free but ties you to their specific dependency tree. Every demo in this collection is MIT licensed, free forever, no attribution required (though a link back to codefronts.com is always appreciated). Accessibility floor — the popular React glass libraries are rendering-first, accessibility-second. Several of Aceternity's canvas-based glass effects fail every WCAG 1.4.3 contrast test on bright backdrops. Every demo here ships with keyboard navigation, :focus-visible rings that survive the blur, aria-current on the active link, aria-label on icon-only controls, prefers-reduced-motion and prefers-reduced-transparency fallbacks, and Demo 09 documents the @supports not (backdrop-filter) graceful-degrade for browsers where the effect isn't supported. That said — if you're already on React and don't need the accessibility floor or the zero-bundle guarantee, Aceternity is a reasonable prototyping choice. If you're on Framer Motion and want a scroll-linked frost, Demo 10 in this collection ships the exact useScroll + useMotionValueEvent pattern as a copy-paste Header.tsx for the Next.js App Router — it's Framer-Motion-native, not Framer-Motion-competitive.

SaaS marketing sites (Stripe / Linear / Vercel / Framer / Superhuman / Notion / Cron / Height / Retool) — Demo 01 (Modern SaaS Landing Page Header) is the workhorse floating glass header sitting over a vibrant gradient hero, brand mark on the left, primary links in the middle, high-contrast gradient CTA on the right. This is the “tailwind glassmorphism navbar example” every SaaS marketing site starts from. Fintech dashboards and banking apps (Stripe Billing / Coinbase Pro / Robinhood Gold / Ramp / N26 / Trade Republic / Wealthsimple / Plaid) — Demo 03 (Dark Cyberpunk Glassmorphism) for the premium dark-UI dashboard shell, Demo 07 (Pure CSS Lightweight) for the compliance-safe minimal baseline, and Demo 10 (React / Next.js + Framer Motion) for the scroll-linked transparent-over-hero pattern every fintech landing uses. Healthcare and HIPAA-adjacent products (Zocdoc / Doximity / Practice Fusion / Cerbo EHR) — Demo 09 (High-Contrast Accessible) is the WCAG 2.2 AA compliance-ready pattern with the @supports fallback that procurement checkboxes require; healthcare has the strictest accessibility standards in the tier-1 CPM verticals. Legal firm websites and lead-gen (BigLaw sites / Avvo / Rocket Lawyer / LegalZoom) — Demo 01 or Demo 09 pair with the reserved editorial register the legal vertical demands; ABA Model Rule 7.1 requires substantiated claims so avoid gimmick motion and stick to Demo 07 or Demo 09 for lawyer sites. Insurance quote comparators (GEICO / Progressive / Lemonade / Root) — Demo 01 (SaaS Landing Header) for the primary quote CTA landing, Demo 09 (Accessible) for the actual comparison-tool interior; insurance is the highest CPM tier in web advertising ($40-80 CPM) so every conversion matters and the accessible build maximises audit-safe reach. Real estate portals (Zillow / Redfin / Realtor.com) — Demo 11 (Minimalist Portfolio) is the ultra-clean strip that lets full-bleed listing photography lead the page. Web3 marketplaces and wallet-connect flows (OpenSea / Blur / Rainbow / Uniswap / Phantom / MetaMask) — Demo 03 (Dark Cyberpunk) is the aesthetic Web3 audiences expect; the --neon custom property re-skins in one line for per-chain accent theming (cyan for Ethereum, magenta for Polygon, gold for Solana). Streaming and premium subscription (Netflix / Spotify / Twitch / Disney+ / Patreon) — Demo 11 (Minimalist Portfolio) for the imagery-forward player shell, Demo 04 (Floating Pill) for the modern subscription-tier picker. E-commerce checkout flows (Shopify / Stripe Checkout / Amazon / Etsy) — Demo 02 (Scroll-Triggered Frost) is the transparent-over-hero pattern for product-detail pages, Demo 06 (Mobile Off-Canvas Drawer) for the mobile cart/menu experience. Design portfolio sites (Ava Reyes / Awwwards / Behance / Dribbble portfolios) — Demo 11 (Minimalist Portfolio) is purpose-built for this vertical, with the near-clear fill that lets photography lead. Government and public sector (gov.uk / civicline / municipal portals) — Demo 09 (High-Contrast Accessible) is the only defensible choice; accessibility is legally mandated in most tier-1 jurisdictions (Section 508 / EN 301 549 / AODA / DDA / EAA). Dev-tool sites and documentation (Cursor / Raycast / Arc / Framer / Linear docs / Stripe docs) — Demo 07 (Pure CSS Lightweight) is the Lighthouse-baseline that dev-facing audiences expect (they will Lighthouse your site), Demo 08 (Animated Border Glow) for the premium mark that dev-tool marketing pages use to signal “this is a well-crafted product”. Every demo is hand-coded CSS with optional vanilla JS — copy the HTML + CSS panels, drop them into any stack, ship.

Yes on both. Every navbar in this collection 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 (Demo 01's customization field documents the Tailwind translation). Server-side rendering works on every demo without hydration flash because there's no client-only visual state — position: sticky, backdrop-filter, and the CSS keyframes all render identically on the server and the client. Demo 10 (React / Next.js Component Pattern) specifically documents the no-FOUC pattern for the Next.js App Router with streaming SSR: the client-only 'use client' directive gates the useScroll hook, the initial render matches the server output, and the scroll-linked state hydrates without visual jump. Content-Security-Policy — every demo works under a strict CSP (script-src 'self' without 'unsafe-inline') 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 event delegation or AbortController for cleanup. Vue 3 v-model works on the mobile-drawer checkbox pattern. Angular, Blazor, HTMX, Turbo, Rails ERB, Django, Laravel Blade, WordPress themes, and static HTML all work — the HTML + CSS + JS is framework-agnostic. Tailwind users: the CSS translates cleanly — backdrop-filter: blur(16px) saturate(180%) maps to backdrop-blur-xl backdrop-saturate-150, background: rgba(255,255,255,.5) maps to bg-white/50, capsule shapes (Demo 04) to rounded-full. The @property typed custom properties in Demo 08 and the named @keyframes in every demo go in tailwind.config.js under extend.keyframes + extend.animation, or into a small @layer utilities block. Every demo has been mentally tested at 320px, 600px, and 1200px viewport widths per this site's responsive-first contract — the code you copy is the code that ships to your users at every width.