24 Tailwind Liquid Glass Navbars
04 / 24

All 24 in 24 Tailwind Liquid Glass Navbars

  1. 01Tailwind iOS 26 Floating Tab Bar
  2. 02Tailwind macOS Tahoe Menu Bar
  3. 03Tailwind Safari Toolbar with SVG Refraction
  4. 04Tailwind visionOS Glass Navbar
  5. 05Tailwind Liquid Glass Bottom Accessory Bar
  6. 06Tailwind Dynamic Island Morphing Nav
  7. 07Tailwind Liquid Glass Navbar (Canonical)
  8. 08Tailwind Responsive Glass Navbar with Burger
  9. 09Tailwind Next.js Sticky Glass Header
  10. 10Tailwind Spring Glide Menu (Framer Motion Port)
  11. 11Tailwind CSS Variables Glass Theme Generator
  12. 12Tailwind Glass Override for Bootstrap 5 Navbars
  13. 13Tailwind Scroll-Opacity Sticky Navbar
  14. 14Tailwind Inner-Glow Glass Nav Links
  15. 15Tailwind Cursor-Lens Glass Nav (GSAP-ready)
  16. 16Tailwind Animated Gradient Blobs Glass Navbar
  17. 17Tailwind Sliding Capsule Tab Bar (group-has)
  18. 18Tailwind Reflective Glass Sidebar
  19. 19Tailwind Fallback-First Glass Navbar
  20. 20Tailwind High-Contrast Accessible Glass Navbar
  21. 21Tailwind Light / Dark Liquid Glass Navbar
  22. 22Tailwind Performance-Tuned Glass Navbar
  23. 23Tailwind Minimalist Dual-Border Glass Header
  24. 24Tailwind Responsive Glass Sidebar to Bottom Tabs
Tailwind v4MIT licensed

Tailwind visionOS Glass Navbar

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].

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="nbtw-04 grid place-items-center w-full min-h-svh p-6 font-nb04-sans bg-[radial-gradient(90%_120%_at_70%_10%,#1b2b4d,#070a14_70%),url('https://picsum.photos/seed/nb04dark/1000/700')] bg-center bg-cover [background-blend-mode:soft-light]" aria-label="visionOS style glass navbar demo">
  <nav class="flex flex-wrap items-center gap-x-5 gap-y-3 w-[min(760px,94%)] px-4.5 py-3.5 rounded-[22px] isolate [contain:layout_paint] text-white bg-[color-mix(in_oklab,black_34%,transparent)] border border-white/[0.16] shadow-[inset_0_1px_0_rgba(255,255,255,.5),0_34px_70px_-26px_rgba(0,0,0,.85)] backdrop-blur-[40px] backdrop-saturate-[1.4] backdrop-brightness-[1.05]" aria-label="Primary">
    <span class="flex items-center gap-2.5 text-[17px] font-extrabold tracking-[-0.01em]">
      <span class="size-3.5 rounded-full bg-[radial-gradient(circle_at_30%_30%,#fff,var(--color-nb04-accent))] shadow-[0_0_14px_var(--color-nb04-accent)]" aria-hidden="true"></span>Horizon
    </span>
    <div class="flex flex-wrap gap-1.5 ms-auto">
      <a class="flex items-center min-h-10 px-[15px] rounded-xl no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.14] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 aria-[current=page]:bg-white/20 aria-[current=page]:text-white" href="#nbtw-04" aria-current="page">Spaces</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-xl no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.14] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-04">Immersive</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-xl no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.14] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-04">Library</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-xl no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.14] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-04">Shared</a>
    </div>
    <button class="min-h-10 px-5 rounded-xl border border-[color-mix(in_oklab,var(--color-nb04-accent)_50%,white)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--color-nb04-accent)_80%,white),var(--color-nb04-accent))] text-[#04121a] text-[14.5px] font-bold cursor-pointer transition-transform duration-200 hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:transition-none" type="button">Enter</button>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-nb04-accent: #45b8e0;
  --color-nb04-accent: oklch(0.72 0.16 210);
  --font-nb04-sans: system-ui, 'Segoe UI', sans-serif;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-nb04-accent: #45b8e0;
  --color-nb04-accent: oklch(0.72 0.16 210);
  --font-nb04-sans: system-ui, 'Segoe UI', sans-serif;
}

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • One CSS declaration becomes three utilities: backdrop-blur-[40px] backdrop-saturate-[1.4] backdrop-brightness-[1.05]. Tailwind composes the chain itself, so the order you type them in does not matter.
  • saturate(140%) becomes backdrop-saturate-[1.4] — the utility takes a multiplier, and this is the most common unit slip when porting a glass recipe.
  • [contain:layout_paint] is an arbitrary property because contain is a paint-isolation hint rather than a design token. At a 40px blur it is doing real performance work, not decoration.
  • The accent lives in @theme, so the brand dot's gradient, its glow shadow and the CTA's gradient all read var(--color-nb04-accent) and retune together.
  • The two shadows in one arbitrary value are the whole floating illusion: an inset hairline for the specular top edge, a huge soft offset shadow for ambient occlusion.
  • flex-wrap plus gap on the bar and the link group is what lets this panel survive a narrow preview pane without a media query.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind visionOS Glass Navbar
Source: https://codefronts.com/navigation/tailwind-liquid-glass-navbars/tailwind-visionos-glass-navbar/

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].
## HTML
```html
<section class="nbtw-04 grid place-items-center w-full min-h-svh p-6 font-nb04-sans bg-[radial-gradient(90%_120%_at_70%_10%,#1b2b4d,#070a14_70%),url('https://picsum.photos/seed/nb04dark/1000/700')] bg-center bg-cover [background-blend-mode:soft-light]" aria-label="visionOS style glass navbar demo">
  <nav class="flex flex-wrap items-center gap-x-5 gap-y-3 w-[min(760px,94%)] px-4.5 py-3.5 rounded-[22px] isolate [contain:layout_paint] text-white bg-[color-mix(in_oklab,black_34%,transparent)] border border-white/[0.16] shadow-[inset_0_1px_0_rgba(255,255,255,.5),0_34px_70px_-26px_rgba(0,0,0,.85)] backdrop-blur-[40px] backdrop-saturate-[1.4] backdrop-brightness-[1.05]" aria-label="Primary">
    <span class="flex items-center gap-2.5 text-[17px] font-extrabold tracking-[-0.01em]">
      <span class="size-3.5 rounded-full bg-[radial-gradient(circle_at_30%_30%,#fff,var(--color-nb04-accent))] shadow-[0_0_14px_var(--color-nb04-accent)]" aria-hidden="true"></span>Horizon
    </span>
    <div class="flex flex-wrap gap-1.5 ms-auto">
      <a class="flex items-center min-h-10 px-[15px] rounded-xl no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.14] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 aria-[current=page]:bg-white/20 aria-[current=page]:text-white" href="#nbtw-04" aria-current="page">Spaces</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-xl no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.14] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-04">Immersive</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-xl no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.14] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-04">Library</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-xl no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.14] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-04">Shared</a>
    </div>
    <button class="min-h-10 px-5 rounded-xl border border-[color-mix(in_oklab,var(--color-nb04-accent)_50%,white)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--color-nb04-accent)_80%,white),var(--color-nb04-accent))] text-[#04121a] text-[14.5px] font-bold cursor-pointer transition-transform duration-200 hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 motion-reduce:transition-none" type="button">Enter</button>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-nb04-accent: #45b8e0;
  --color-nb04-accent: oklch(0.72 0.16 210);
  --font-nb04-sans: system-ui, 'Segoe UI', sans-serif;
}
```

How this works

Backdrop filters compose as separate utilities. The CSS version writes one declaration; Tailwind emits a chain, and the order of the utilities in your class list does not matter because it controls the order internally:

class="backdrop-blur-[40px] backdrop-saturate-[1.4] backdrop-brightness-[1.05]"
/* -> backdrop-filter: blur(40px) saturate(1.4) brightness(1.05) */

Dark glass is a tint decision, not a blur decision. color-mix(in oklab, black 34%, transparent) under a heavy blur is what produces the visionOS read; the same blur over a white tint gives you fog with no depth. Keeping the tint at 30% or more is also what keeps text contrast valid over bright media.

The blur is boxed. [contain:layout_paint] tells the engine that nothing inside affects layout or paint outside, so a 40px backdrop-filter samples a bounded region instead of triggering wide repaints. isolate gives the panel its own stacking context so the rim and shadow cannot be composited into a parent's blend.

The panel floats because of two shadows. An inset hairline at the top is the specular edge where light catches the pane; a large, very soft, downward-offset shadow is the ambient occlusion underneath. Together they are the whole illusion of elevation.

Make it yours

  • Push backdrop-blur-[50px] and raise the ambient shadow for an even heavier slab — watch the frame budget as you do.
  • Tint cooler or warmer by mixing a hue into the black: bg-[color-mix(in_oklab,#0b1220_34%,transparent)].
  • Recolour everything accent-driven by editing --color-nb04-accent; the brand dot, its glow and the CTA gradient all read it.
  • Increase perceived elevation with a small -translate-y-1 and a larger shadow spread rather than more blur.
  • Drop backdrop-brightness if the media behind is already bright — it is the first thing to go when contrast gets tight.

Gotchas — read before shipping

  • Dark glass over dark media crushes contrast. Keep the tint at 30% or above and test the text against your actual worst-case frame, not a mid-grey.
  • Very high blur is expensive. [contain:layout_paint] is not optional at 40px — without it the whole page can repaint on scroll.
  • backdrop-saturate-[1.4] takes a multiplier, not a percentage: 140% in CSS is 1.4 here.
  • contain can clip outer shadows if you reach for strict. layout paint is the pair that keeps the ambient shadow visible.
  • Older Safari needs -webkit-backdrop-filter; Tailwind's utilities emit it, but a hand-rolled [backdrop-filter:...] arbitrary property does not.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Tailwind v4 sets the floor. brightness() and saturate() inside backdrop-filter degrade to plain blur where unsupported, which still reads as a dark glass panel.

Techniques used in this demo

Theme tokensset in @theme, used by a utility

oklch()tw ↗

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →