24 Tailwind Liquid Glass Navbars
07 / 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 Liquid Glass Navbar (Canonical)

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.

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-07 grid place-items-start justify-center w-full min-h-svh px-5 py-6.5 font-nb07-sans bg-[linear-gradient(120deg,#3a1c71,#d76d77_50%,#ffaf7b)] bg-[length:180%_180%] animate-nb07-bg motion-reduce:animate-none" aria-label="Tailwind liquid glass navbar demo">
  <header class="flex flex-wrap items-center gap-x-5 gap-y-3 w-[min(820px,100%)] ps-5.5 pe-4 py-3 rounded-full text-white bg-white/10 ring-1 ring-white/20 inset-ring inset-ring-white/25 backdrop-blur-xl backdrop-saturate-150 shadow-[0_18px_40px_-22px_rgba(0,0,0,.6)]">
    <a class="text-[17px] font-extrabold tracking-[-0.01em] no-underline text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-07">◆ Utility</a>
    <nav class="flex flex-wrap gap-1 ms-auto" aria-label="Primary">
      <a class="flex items-center min-h-10 px-[15px] rounded-full no-underline text-white/85 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-07" aria-current="page">Product</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-full no-underline text-white/85 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-07">Docs</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-full no-underline text-white/85 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-07">Pricing</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-full no-underline text-white/85 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-07">Blog</a>
    </nav>
    <button class="min-h-10 px-5 rounded-full border-0 bg-white text-[#3a1c71] 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-[3px] motion-reduce:transition-none" type="button">Sign up</button>
  </header>
</section>
@import "tailwindcss";

@theme {
  --font-nb07-sans: system-ui, 'Segoe UI', sans-serif;
  --animate-nb07-bg: nb07-bg 16s ease-in-out infinite;
}

@keyframes nb07-bg {
  50% {
    background-position: 100% 100%;
  }
}

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 {
  --font-nb07-sans: system-ui, 'Segoe UI', sans-serif;
  --animate-nb07-bg: nb07-bg 16s ease-in-out infinite;
}

@keyframes nb07-bg {
  50% {
    background-position: 100% 100%;
  }
}

What changed in the port

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

  • The bar uses no arbitrary values except its ambient shadow. That is deliberate: this is the entry to copy when you do not want to own any numbers.
  • ring-1 ring-white/20 replaces the border because a ring paints outside the box — it cannot change the bar's height, and it composites cleanly over a translucent fill.
  • v4's inset-ring gives the inner specular edge without an arbitrary inset shadow, which is the one piece of the glass recipe that used to need brackets.
  • backdrop-saturate-150 is the scale step nearest the hand-written saturate(160%), and the difference is not visible — a good reminder that not every ported number needs to be exact.
  • hover: and aria-[current=page]: are the same white at two opacities, so the bar never looks like it has two highlight materials.
  • The drifting gradient behind the bar is not decoration for its own sake: over a flat colour this navbar has nothing to refract and the whole effect disappears.
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 Liquid Glass Navbar (Canonical)
Source: https://codefronts.com/navigation/tailwind-liquid-glass-navbars/tailwind-liquid-glass-navbar-canonical/

The canonical version, and the only demo in the collection written almost entirely from Tailwind's default scale &mdash; 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.
## HTML
```html
<section class="nbtw-07 grid place-items-start justify-center w-full min-h-svh px-5 py-6.5 font-nb07-sans bg-[linear-gradient(120deg,#3a1c71,#d76d77_50%,#ffaf7b)] bg-[length:180%_180%] animate-nb07-bg motion-reduce:animate-none" aria-label="Tailwind liquid glass navbar demo">
  <header class="flex flex-wrap items-center gap-x-5 gap-y-3 w-[min(820px,100%)] ps-5.5 pe-4 py-3 rounded-full text-white bg-white/10 ring-1 ring-white/20 inset-ring inset-ring-white/25 backdrop-blur-xl backdrop-saturate-150 shadow-[0_18px_40px_-22px_rgba(0,0,0,.6)]">
    <a class="text-[17px] font-extrabold tracking-[-0.01em] no-underline text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-07">◆ Utility</a>
    <nav class="flex flex-wrap gap-1 ms-auto" aria-label="Primary">
      <a class="flex items-center min-h-10 px-[15px] rounded-full no-underline text-white/85 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-07" aria-current="page">Product</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-full no-underline text-white/85 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-07">Docs</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-full no-underline text-white/85 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-07">Pricing</a>
      <a class="flex items-center min-h-10 px-[15px] rounded-full no-underline text-white/85 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-07">Blog</a>
    </nav>
    <button class="min-h-10 px-5 rounded-full border-0 bg-white text-[#3a1c71] 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-[3px] motion-reduce:transition-none" type="button">Sign up</button>
  </header>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --font-nb07-sans: system-ui, 'Segoe UI', sans-serif;
  --animate-nb07-bg: nb07-bg 16s ease-in-out infinite;
}

@keyframes nb07-bg {
  50% {
    background-position: 100% 100%;
  }
}
```

How this works

Everything here is on the scale. That is the whole point of this entry: it is the version whose numbers you do not have to justify.

class="flex items-center gap-5 w-[min(820px,100%)] ps-5.5 pe-4 py-3
       rounded-full text-white bg-white/10
       ring-1 ring-white/20 backdrop-blur-xl backdrop-saturate-150
       shadow-[0_18px_40px_-22px_rgba(0,0,0,.6)]"

ring beats border for glass. A ring is painted as a shadow outside the box, so it never adds to layout the way a border does and it composites cleanly over a translucent fill. Where you want the inner specular edge too, v4's inset-ring-1 inset-ring-white/25 gives it without reaching for an arbitrary shadow.

Two link states, one colour. hover:bg-white/[0.14] and aria-[current=page]:bg-white/20 are the same white at two opacities, which is what keeps a glass bar from looking like it has two different highlight materials.

The only arbitrary value is the drop shadow, because ambient occlusion under a floating bar is a physical measurement, not a design-scale step. Everything else — blur, saturation, ring, radius, spacing — is a named step you can change without recalculating anything.

Make it yours

  • Change the glass weight with bg-white/5 through bg-white/20; below 5% the frost has nothing to tint, above 20% it stops reading as glass.
  • Swap backdrop-blur-xl for 2xl or 3xl for a heavier pane — and drop the saturation a step as you do, or colours behind start to smear.
  • Recolour the CTA with any Tailwind background and ring pair; it is the one element here meant to be brand-coloured.
  • Square it off with rounded-2xl for a more app-like header, or keep rounded-full for the iOS read.
  • Add sticky top-4 z-10 to float it over a scrolling page — nothing else needs to change.

Gotchas — read before shipping

  • backdrop-blur-* needs a non-opaque background. Adding an opaque bg-* utility later is the most common way people accidentally delete their own frost.
  • In v4 ring-1 defaults to currentColor, so always pair it with a ring-* colour; a bare ring-1 on white text gives you a solid white outline.
  • Keep ring-inset off if you want the rim to read as the outer edge of the pane; use the separate inset-ring utility for the inner highlight instead of switching the outer one.
  • backdrop-saturate-150 is a scale step (1.5); the CSS saturate(160%) from the hand-written version rounds to it, and the difference is invisible.
  • The browser CDN build compiles in the page and is for prototyping only. Ship the CLI or a plugin build.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Tailwind v4 sets the floor. The generated backdrop-filter is standard and prefixed automatically; without support the bar degrades to a flat bg-white/10 panel that still reads intentional.

Techniques used in this demo

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →