11 Tailwind CSS Glassmorphic Navbars

The core is two utilities working together: a semi-transparent background and backdrop-blur. A SaaS header like Demo 01 uses bg-white/60 plus backdrop-blur-md on a sticky top-0 wrapper, with a border-b border-white/20 hairline and a faint shadow to lift it off the hero. The fill opacity is what you tune first — too opaque and it stops reading as glass, too clear and the blur has nothing to tint. Keep the element backgrounded with a slash-opacity colour rather than a solid; backdrop-blur only blurs what sits behind the box, so a fully opaque bg-white hides the effect entirely. Pair it with supports-[backdrop-filter]:bg-white/60 and a higher opaque fallback fill for browsers that skip the filter, so the bar never renders invisible.

Three causes account for almost every case. First, the bar's own background is opaque — bg-white instead of bg-white/60 — so there is nothing translucent for the blur to show through. Second, an ancestor has overflow-hidden, a transform, or its own filter; any of those creates a containing block that clips the backdrop region, and the blur silently does nothing. Keep the sticky bar a direct child of <body> or a plain wrapper with none of those. Third, the bar sits below the scrolled content in paint order — give it z-50 so the hero actually passes behind it. On iOS Safari you also need the vendored filter, which Tailwind's backdrop-blur emits for you, but a parent overflow or transform will still break it there first, so check the ancestor chain before you blame the browser.

Start the bar with bg-transparent and no border over a full-bleed image, then swap to bg-white/70 backdrop-blur-md border-b once the user scrolls past the hero, as Demo 02 does. The clean mechanism is not a scroll listener — that fires on every frame and janks — but an IntersectionObserver watching a 1px sentinel at the top of the hero: when it leaves the viewport, toggle a scrolled class on the header. Put transition-colors duration-300 on the bar so the frost fades in rather than snapping. Demo 10 is the React and Next.js App Router version of the same idea, driving the class with Framer Motion's useScroll. Transition the text colour too — white over the photo, slate once the glass fill lands — or the links wash out and disappear at the exact handover point.

By default, usually not — that is the honest answer. Link text over glass is only as readable as the lightest pixel the blur lets through, so a 20% fill that looks fine over a dark photo fails 4.5:1 the moment a bright area scrolls underneath. Demo 09 is built to pass a real audit: a 72% white fill that holds AA against the lightest part of the image, text-slate-900 links rather than grey, and an opaque solid fallback so the bar never drops below its tested contrast. Test against the worst-case background, not the average. Honour prefers-reduced-transparency by swapping to an opaque fill, and keep a visible :focus-visible ring on every link — the frosted surface makes default focus outlines hard to see. Any icon-only control, like the hamburger <button>, needs an aria-label because there is no text for a screen reader to announce.

Pin the height and use sticky, not fixed. Demo 07 is the Core Web Vitals baseline: a sticky top-0 bar with a fixed h-14, so it reserves its own space in normal flow and never shifts the content below it — that is zero CLS by construction. A fixed header pulls itself out of flow, so you then have to pad the page top by the exact header height, and any mismatch jumps the layout on load. If you must go fixed, add scroll-mt-14 to anchor targets so in-page links don't land hidden under the bar. Keep the effect to a single backdrop-blur — stacking blur, an animated gradient border and a heavy shadow forces extra compositor layers and can stutter the scroll on low-end phones. One GPU-composited filter plus a hairline border is the whole rendering cost of this demo.

Demo 05 does it with Tailwind's named groups and no script. Wrap each top-level item in a group, mark the panel invisible opacity-0, and reveal it with group-hover:visible group-hover:opacity-100 plus a transition. Give the panel the same bg-white/70 backdrop-blur-lg fill so the menu reads as part of the glass system. The bug everyone hits is keyboard access: hover alone locks out anyone not using a mouse, so add group-focus-within:visible group-focus-within:opacity-100 and make the triggers real <a> or <button> elements that can take focus. Keep a small pt-2 gap inside the hover area so the pointer doesn't cross a dead zone between the trigger and the panel and dismiss the menu mid-move. The three-column mega panel is just a grid grid-cols-3 laid inside that same frosted container.

Demo 06 uses the checkbox pattern so the open state needs no script. A visually hidden <input type="checkbox"> sits before the drawer, and the hamburger is a <label> pointing at it. The drawer starts at translate-x-full and slides in with peer-checked:translate-x-0 transition-transform, while a sibling scrim fades in via peer-checked:opacity-100 over a backdrop-blur-sm blurred backdrop. Two things the pure-CSS version cannot do and you should add in JS for production: lock <body> scroll while the drawer is open, and trap focus inside it so Tab doesn't wander behind the scrim. Wire the Escape key to uncheck the box so the drawer closes, and give the hamburger an aria-expanded that flips with state plus an aria-label, since an icon-only control announces nothing on its own.

Skip it when the background behind the bar is busy or high-contrast — glass over a photo with both bright sky and dark foliage cannot hold readable text at any single fill opacity, and you will chase contrast failures forever. A solid or single-tint bar is the honest choice there. Skip it too on content-first sites where the chrome should disappear: Demo 11 answers this with near-clear glass — a 12% white fill and an 8px blur — precisely so a portfolio's work stays the hero, but if even that competes for attention, drop to a plain opaque bar. On very low-end devices a full-width backdrop-blur that repaints on every scroll frame costs real battery and can stutter; the zero-JS sticky bar in Demo 07 with one light blur is the safe floor. And never stack a heavy neon glow, an animated gradient border and blur together, as Demos 03 and 08 do, on a page that already animates heavily elsewhere.