24 Tailwind liquid glass navbars that rebuild the Apple-style material as real navigation — floating tab bars, Dynamic Island morphing pills, macOS Tahoe menu strips, visionOS slabs, SVG-refraction Safari toolbars, scroll-opacity sticky headers, burger and container-query responsive bars, reflective sidebars, plus light/dark, high-contrast, and performance-tuned variants. Scoped under .nbtw-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Building a whole Tailwind app, not just this component?
You just browsed 24 Tailwind liquid glass navbars. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
The iOS 26 bottom tab bar as a floating glass capsule, ported so the collapse is a state rather than a class. The scroll handler writes data-compact on the bar and nothing else; data-[compact=true]: retunes the bar's own padding while group-data-[compact=true]: reaches the labels two levels down. The frost recipe — translucent fill, hairline rim, inset specular, backdrop-blur-[24px] — is one class list you can read end to end.
The razor-thin translucent strip from macOS Tahoe, and the cleanest port in the collection: not one rule survives into a stylesheet. Every property — the 34px height, the blur(30px) saturate(180%) frost, the hairline bottom border, the inset top rim, the margin-inline-start:auto status cluster — has a utility, so the whole menu bar is markup plus a four-line @theme block.
The toolbar that goes past blur into real optical refraction, ported with the filter reference sitting on the element as an arbitrary utility: [filter:url(#nbtw-03-refract)]. The feTurbulence + feDisplacementMap pair stays in the markup where it belongs, the frost is backdrop-blur-[14px], and the only stylesheet rule is the @supports not fallback — a negated feature query has no variant form.
The spatial-computing slab: a dark, heavily frosted panel with a bright specular rim and a deep ambient shadow, tuned so links stay legible over video and photography. The port stacks three backdrop-* utilities to compose blur(40px) saturate(140%) brightness(1.05), and keeps the expensive paint boxed in with [contain:layout_paint].
The iOS 26 bottom-accessory pattern: a now-playing mini-player floating above the tab bar, two glass surfaces sharing one material at two elevations. This is also the port's most honest lesson — with no @apply, the shared frost recipe is typed twice, and the notes explain why that is the right call rather than a workaround.
A glass pill that morphs between a slim capsule and a full navigation panel — and the clearest demonstration of why data-* variants beat class toggling. The script sets data-state to idle or expanded and manages ARIA; every geometric consequence, including the panel's delayed fade, is declared in the markup next to the resting value.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
The canonical version, and the only demo in the collection written almost entirely from Tailwind's default scale — backdrop-blur-xl, bg-white/10, ring-1 ring-white/20, rounded-full. No bracket values in the bar itself, nothing to tune, nothing to name. If you want one glass header to paste into a project and move on, this is it.
A glass navbar that collapses behind an animated burger — ported so the container query lives on the elements that respond to it (@max-[560px]:hidden) and the open state lives on one data-open attribute. That pairing is exactly what a React component wants: useState writes the attribute, and every visual consequence is already in the JSX class strings.
The SSR-safe header: it ships its final glass state in the server-rendered HTML, then deepens the frost past the hero. The port is the strongest argument for utilities in a Next.js app — because the class strings are static and complete, the first painted frame already matches the hydrated one, and the scroll enhancement is one data-scrolled attribute.
The shared-element indicator: one frosted pill glides between links on a spring, the layoutId feel without the library. The port draws a clean line — the pill's look and its transition are utilities, its two measured numbers are inline styles written by the handler, and the notes are explicit that measurement is the one job utilities cannot do.
The demo that draws the most important line in the whole port: @theme is compile-time. Values a user retunes at runtime — blur radius, tint alpha, hue — must stay ordinary custom properties, and utilities read them with backdrop-blur-(--nb11-blur) and bracketed color-mix(). Sliders write the variables; nothing recompiles, nothing re-renders.
The liquid-glass look retro-fitted onto Bootstrap's navbar shape, and the port with the most real-world friction: Tailwind's generated sheet lives in cascade layers, Bootstrap's does not, and an unlayered stylesheet always wins. The markup keeps Bootstrap's structural semantics while the glass comes from utilities, and the notes state plainly what you must configure to make that work.
A navbar that starts fully transparent over a hero and dissolves into frosted glass as you scroll — continuously, not at a breakpoint. One registered custom property carries scroll progress from 0 to 1, and four utilities compute the fill, the blur, the border and the text-shadow from it with calc(). There are no transitions in the demo at all: the value is the animation.
Nav links that illuminate from within: a soft bloom grows inside the glass capsule on hover and a specular rim brightens, so the bar guides the eye with light rather than fills. The port moves the entire ::before layer into the markup with the before: variant — which is where this pattern reads best, because the glow and the state that triggers it end up on the same line.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A bright refraction lens that follows the cursor across the frosted bar — the effect people install GSAP for. The port keeps the lens itself entirely in utilities and leaves exactly two numbers to JavaScript: an eased --nb15-mx and --nb15-my. Swapping the hand-rolled lerp for gsap.quickTo() is then a three-line change that touches no markup.
The showcase setup for any glass bar: three blurred blobs drift behind it so the frost has rich, moving colour to refract — because liquid glass over flat black is invisible. The port turns each orbit into an --animate-* theme entry, so three long keyframe loops become three single utilities and the blobs themselves are four classes each.
A segmented glass tab bar where the capsule slides behind the selected item with no JavaScript — and the port that best justifies itself. The CSS version needs four :has() rules in a stylesheet; here the whole state table lives on the capsule as group-has-[#nbtw-17-2:checked]:translate-x-[86px], one utility per tab, readable in place.
A vertical glass sidebar that samples the colour of whatever panel is in view: scroll, and its tint, top glow and active accent shift as though the glass were picking up the light of the room behind it. The port keeps the reflected colour as a registered custom property, which is the one thing that makes the cross-fade smooth instead of a snap.
A glass navbar engineered to never look broken, and the port where Tailwind wins outright: the entire @supports tiering moves into the markup as supports-[backdrop-filter:blur(1px)]: utilities. The base class list is the opaque, hand-tuned fallback; the variant twins upgrade it to real frost. Both tiers sit in one class list, so neither can be forgotten.
A glass navbar that refuses to trade beauty for accessibility — and the port where two whole media-query blocks become two variants. forced-colors: maps the bar to system colours; contrast-more: darkens the scrim. A semi-opaque scrim under the frost guarantees 4.5:1 over a bright, busy photograph, and the focus ring is a 4px high-contrast outline.
A glass navbar that retunes its whole recipe — fill, rim, saturation, field colour — for light or dark, automatically from the OS and manually from a checkbox. The port makes a real architectural choice: rather than doubling every utility with a dark: twin, the bar reads four tokens and the tokens flip in two small CSS rules.
The glass navbar built for a steady 60fps and clean Core Web Vitals: the expensive paint is boxed with [contain:layout_paint_style] and isolate, the compositor is hinted with will-change-transform on the one animating layer, the specular sweep animates transform only, and the blur is capped on purpose. The port keeps every one of those decisions visible on the element it applies to.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
The most restrained take: a header defined almost entirely by light. A 1px outer hairline pairs with a 1px inner highlight to read as the two faces of a physical pane, over the lightest frost in the collection. In the port this is where v4's inset-ring shines — the inner edge becomes a real utility instead of an arbitrary inset shadow.
One glass navigation that adapts to its container: a floating vertical sidebar when there is room, re-flowing into a bottom tab bar when there is not. Same links, same material, no duplicated markup and no JavaScript. The port puts the whole reflow on the elements as @max-[560px]: utilities, which makes the two layouts readable side by side.
FAQ
Frequently asked questions
Which Tailwind utilities actually build the liquid glass material?
The glass material is three stacked effects, all Tailwind utilities. backdrop-blur-xl frosts whatever scrolls behind the bar, backdrop-saturate-150 pushes the sampled colour so the frost reads as glass rather than grey haze, and a low-opacity fill like bg-white/10 tints it. On top of that a hairline ring-1 ring-white/20 gives the specular rim and shadow-lg the ambient depth. Demo 07 builds the canonical bar from almost nothing but these defaults. Order matters: the two backdrop-* utilities compile to one backdrop-filter declaration, so both act on the same sampled layer, while bg-white/10 paints on top of the blurred sample. Drop the saturate and the bar looks like fog; drop the fill and text contrast collapses over bright content.
Why does my glass navbar render solid instead of translucent?
Almost always a stacking-context or fallback problem. backdrop-filter samples the pixels painted behind the element, so if nothing is actually behind the bar — a solid parent, or the bar sitting above a flat colour — there is nothing to frost and it reads as a plain tinted box. The other frequent cause is an ancestor with overflow-hidden, transform, filter, or isolate: any of those create a new stacking or containing context that clips or flattens the backdrop sample. Move the navbar out of that ancestor or drop the property. Third culprit: the fill opacity is too high — bg-white/40 is nearly solid, so the blur underneath never shows. Keep the fill in the /8 to /15 range and let backdrop-blur and backdrop-saturate carry the material.
How do I build the sliding capsule tab indicator without JavaScript?
Demo 17 does it with group-has and sibling selectors, zero JavaScript. Each tab is a radio <input> wrapped in a <label>; the capsule is one absolutely-positioned element behind the row. The container carries group, and per-tab rules like group-has-[#tab2:checked]:translate-x-full move the capsule to the checked item's slot. Because it is a real radio group, keyboard users get arrow-key roving for free and the selection survives with no click handler. The gotcha is that the translate distances are hard-coded per slot, so the tab count is fixed at author time — add a fifth tab and every translate-x-* value shifts. For a variable number of items you want the JavaScript indicator from demo 10, which measures the active link and animates a shared pill on a spring.
Can I theme the glass at runtime with Tailwind's @theme block?
This is the line demo 11 draws. Tailwind's @theme block is resolved at build time — the values are baked into the generated stylesheet and into the utility class names, so you cannot change them at runtime by flipping a property. If you want a glass navbar whose tint, blur radius, or rim colour changes live — a theme switcher, a user-tunable panel — define plain CSS custom properties like --glass-fill and reference them with arbitrary-value utilities such as bg-[var(--glass-fill)]. Then a small script or a :root class flip retunes the whole bar with no rebuild. Use @theme for design tokens that are fixed for the whole site, and CSS variables for anything a visitor or a runtime toggle changes. Confusing the two is exactly why a supposedly themeable navbar ships one hard-coded look.
How do I keep a frosted navbar accessible?
Frost is a readability risk: text over a blurred, moving background can fall below contrast thresholds. Demo 20 handles it with two media queries. prefers-reduced-transparency swaps the translucent fill for a near-solid one so the material stops sampling busy content behind it, and prefers-contrast: more darkens the fill and thickens the rim from ring-white/20 to a full-opacity border. Beyond that: never lean on the blur for legibility — set a real text colour with a guaranteed ratio against the fill, not against whatever scrolls under it. Icon-only controls need aria-label, the active link needs aria-current, and if a mobile burger toggles a panel it needs aria-expanded. The glass is decoration; the semantics and contrast underneath must stand on their own with the effect stripped away.
How do I stop a glass navbar from tanking scroll performance?
backdrop-filter is one of the most expensive paints on the page — it re-samples and blurs live on every frame the content behind it changes, which is exactly what happens while scrolling. Demo 22 boxes the cost with [contain:layout_paint] so the browser knows the navbar's paint cannot affect the rest of the layout, and promotes it to its own compositor layer. Do not animate the blur radius itself — animate opacity or transform instead, which the compositor handles without a repaint. Use will-change sparingly and only on the element that animates; leaving it on permanently keeps a layer alive and wastes memory. On long pages a full-width fixed bar blurs the entire viewport width every frame, so keep the frosted surface as small as the design allows — a floating capsule costs far less than an edge-to-edge strip.
Why does my Next.js glass header flash on load, and how do I fix it?
The flash is the wrong navbar state on first paint. If you compute the glass look in a useEffect — reading scroll position after hydration — the server sends a transparent bar and the client repaints it frosted a moment later, which flickers. Demo 09's fix is to ship the final glass state in the server-rendered markup: the base classes already include backdrop-blur and the fill, so the very first paint is correct, and scroll only deepens the frost rather than switching it on. Keep the sticky positioning (sticky top-0) and the backdrop utilities as static classes, not state-derived ones. If you must react to scroll, use an IntersectionObserver on a sentinel element rather than a main-thread scroll listener, and gate the class change behind a threshold so it does not thrash near the top of the page.
When should I not use a liquid glass navbar?
Skip it when the content behind the bar is text-heavy — a frosted strip over a document makes the text under it swim and hurts the page's own readability. Skip it when you cannot guarantee a fallback: backdrop-filter has real support gaps and cheap devices throttle it, so demo 19's fallback-first approach — a solid fill by default, glass only inside @supports (backdrop-filter: blur(1px)) — is the safe baseline; without it the bar can render invisible over its content. Skip it on long-scroll pages where you cannot contain the paint. And skip it where brand or accessibility demands contrast a translucent fill cannot promise — demo 23's dual-border header gives a premium look defined by light alone, no blur needed. Glass is a finish, not a foundation; the navigation must still work with the effect removed.
