24 Tailwind Liquid Glass Navbars
12 / 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 Glass Override for Bootstrap 5 Navbars

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.

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-12 grid place-items-start justify-center w-full min-h-svh px-4.5 py-6.5 font-nb12-sans bg-[linear-gradient(120deg,#2b5876,#4e4376_60%,#c94b4b)] bg-[length:180%_180%] animate-nb12-bg motion-reduce:animate-none" aria-label="Bootstrap 5 glass navbar demo">
  <nav class="flex flex-wrap items-center gap-3.5 w-[min(900px,100%)] px-4.5 py-3 rounded-[14px] text-white bg-white/[0.12] border border-white/[0.32] shadow-[inset_0_1px_0_rgba(255,255,255,.4),0_16px_38px_-22px_rgba(0,0,0,.6)] backdrop-blur-[18px] backdrop-saturate-[1.7]" aria-label="Primary">
    <a class="text-lg font-extrabold tracking-[-0.01em] no-underline text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-12">✦ Enterprise</a>
    <button class="hidden ms-auto w-11 h-[38px] rounded-[9px] border border-white/40 bg-white/[0.14] text-white text-xl cursor-pointer max-[640px]:block focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" type="button" aria-label="Toggle navigation"><span aria-hidden="true">≡</span></button>
    <div class="flex flex-1 flex-wrap items-center gap-3.5 max-[640px]:basis-full max-[640px]:flex-col max-[640px]:items-stretch">
      <ul class="flex flex-wrap gap-1 list-none ms-auto max-[640px]:flex-col max-[640px]:ms-0">
        <li><a class="flex items-center min-h-10 px-3.5 rounded-[9px] no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.16] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 aria-[current=page]:bg-white/[0.24] aria-[current=page]:text-white" href="#nbtw-12" aria-current="page">Dashboard</a></li>
        <li><a class="flex items-center min-h-10 px-3.5 rounded-[9px] no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.16] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-12">Projects</a></li>
        <li><a class="flex items-center min-h-10 px-3.5 rounded-[9px] no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.16] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-12">Team</a></li>
        <li><a class="flex items-center min-h-10 px-3.5 rounded-[9px] no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.16] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-12">Billing</a></li>
      </ul>
      <button class="min-h-10 px-4.5 rounded-[9px] border border-[color-mix(in_oklab,var(--color-nb12-accent)_40%,white)] bg-nb12-accent text-white text-sm font-bold cursor-pointer focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" type="button">Log in</button>
    </div>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-nb12-accent: #3b74e8;
  --color-nb12-accent: oklch(0.6 0.2 255);
  --font-nb12-sans: system-ui, 'Segoe UI', sans-serif;
  --animate-nb12-bg: nb12-bg 18s ease-in-out infinite;
}

@keyframes nb12-bg {
  50% {
    background-position: 100% 100%;
  }
}
/* In a real Bootstrap project, declare the layer order BEFORE importing either
   framework, so Tailwind's utilities can win without !important:

   @layer bootstrap, theme, base, components, utilities;
   @import "bootstrap/dist/css/bootstrap.css" layer(bootstrap);
   @import "tailwindcss";                                          */

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-nb12-accent: #3b74e8;
  --color-nb12-accent: oklch(0.6 0.2 255);
  --font-nb12-sans: system-ui, 'Segoe UI', sans-serif;
  --animate-nb12-bg: nb12-bg 18s ease-in-out infinite;
}

@keyframes nb12-bg {
  50% {
    background-position: 100% 100%;
  }
}
/* In a real Bootstrap project, declare the layer order BEFORE importing either
   framework, so Tailwind's utilities can win without !important:

   @layer bootstrap, theme, base, components, utilities;
   @import "bootstrap/dist/css/bootstrap.css" layer(bootstrap);
   @import "tailwindcss";                                          */

What changed in the port

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

  • Layer order is the whole integration story: Tailwind v4 emits into @layer, and unlayered Bootstrap beats layered utilities regardless of specificity. Import Bootstrap into an earlier layer, or run Tailwind with the important modifier — and decide which before you start.
  • Bootstrap's .bg-* utilities set opaque fills, and backdrop-filter over an opaque fill renders nothing. The port has to remove them, not out-specify them.
  • The component shape stays recognisably Bootstrap so a team can see their own markup; only the visual layer moves to utilities.
  • Two resets can collide — Preflight and Reboot both normalise. Load one, or scope Preflight out if your typography shifts.
  • focus-visible: rings are re-added explicitly on every control, because framework resets are the usual reason they went missing.
  • The collapse here is a max-[640px]: media variant for demonstration. In production keep Bootstrap's collapse JavaScript; the glass utilities are indifferent to what toggles the container.
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 Glass Override for Bootstrap 5 Navbars
Source: https://codefronts.com/navigation/tailwind-liquid-glass-navbars/tailwind-glass-override-for-bootstrap-5-navbars/

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.
## HTML
```html
<section class="nbtw-12 grid place-items-start justify-center w-full min-h-svh px-4.5 py-6.5 font-nb12-sans bg-[linear-gradient(120deg,#2b5876,#4e4376_60%,#c94b4b)] bg-[length:180%_180%] animate-nb12-bg motion-reduce:animate-none" aria-label="Bootstrap 5 glass navbar demo">
  <nav class="flex flex-wrap items-center gap-3.5 w-[min(900px,100%)] px-4.5 py-3 rounded-[14px] text-white bg-white/[0.12] border border-white/[0.32] shadow-[inset_0_1px_0_rgba(255,255,255,.4),0_16px_38px_-22px_rgba(0,0,0,.6)] backdrop-blur-[18px] backdrop-saturate-[1.7]" aria-label="Primary">
    <a class="text-lg font-extrabold tracking-[-0.01em] no-underline text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-12">✦ Enterprise</a>
    <button class="hidden ms-auto w-11 h-[38px] rounded-[9px] border border-white/40 bg-white/[0.14] text-white text-xl cursor-pointer max-[640px]:block focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" type="button" aria-label="Toggle navigation"><span aria-hidden="true">≡</span></button>
    <div class="flex flex-1 flex-wrap items-center gap-3.5 max-[640px]:basis-full max-[640px]:flex-col max-[640px]:items-stretch">
      <ul class="flex flex-wrap gap-1 list-none ms-auto max-[640px]:flex-col max-[640px]:ms-0">
        <li><a class="flex items-center min-h-10 px-3.5 rounded-[9px] no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.16] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 aria-[current=page]:bg-white/[0.24] aria-[current=page]:text-white" href="#nbtw-12" aria-current="page">Dashboard</a></li>
        <li><a class="flex items-center min-h-10 px-3.5 rounded-[9px] no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.16] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-12">Projects</a></li>
        <li><a class="flex items-center min-h-10 px-3.5 rounded-[9px] no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.16] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-12">Team</a></li>
        <li><a class="flex items-center min-h-10 px-3.5 rounded-[9px] no-underline text-white/[0.86] text-[14.5px] font-semibold transition-[background-color,color] duration-200 hover:bg-white/[0.16] hover:text-white focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-12">Billing</a></li>
      </ul>
      <button class="min-h-10 px-4.5 rounded-[9px] border border-[color-mix(in_oklab,var(--color-nb12-accent)_40%,white)] bg-nb12-accent text-white text-sm font-bold cursor-pointer focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" type="button">Log in</button>
    </div>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-nb12-accent: #3b74e8;
  --color-nb12-accent: oklch(0.6 0.2 255);
  --font-nb12-sans: system-ui, 'Segoe UI', sans-serif;
  --animate-nb12-bg: nb12-bg 18s ease-in-out infinite;
}

@keyframes nb12-bg {
  50% {
    background-position: 100% 100%;
  }
}
/* In a real Bootstrap project, declare the layer order BEFORE importing either
   framework, so Tailwind's utilities can win without !important:

   @layer bootstrap, theme, base, components, utilities;
   @import "bootstrap/dist/css/bootstrap.css" layer(bootstrap);
   @import "tailwindcss";                                          */
```

How this works

The markup stays recognisably Bootstrap. That is the point: a team already on Bootstrap should be able to read this and see their own component, with the glass layered on top:

class="flex flex-wrap items-center gap-3.5 rounded-[14px]
       bg-white/[0.12] border border-white/[0.32]
       backdrop-blur-[18px] backdrop-saturate-[1.7]"

Layer order is the real problem. Tailwind v4 emits its output inside @layer. Any unlayered CSS — which includes a stock Bootstrap bundle — beats every layered rule regardless of specificity. Two ways out: load Bootstrap into a layer you declare before Tailwind's, or run Tailwind with the important modifier so its utilities carry !important. Pick one deliberately; discovering it at debug time is miserable.

Opaque backgrounds are the other trap. A leftover bg-dark or bg-body from the framework sets a solid fill, and backdrop-filter over a solid fill renders nothing. Removing those classes is not optional.

The collapse is a media variant. Below 640px the actions stack full-width and the toggler appears — enough to demonstrate the shape. In production keep Bootstrap's collapse JavaScript and let it toggle its own classes; the glass utilities do not care what toggles the container.

Make it yours

  • Choose your integration up front: Bootstrap in an earlier @layer, or Tailwind's important modifier. Do not mix both.
  • Tokenise the tint with Bootstrap's own variables (--bs-*) if your theme already drives colour from there.
  • Match Bootstrap's breakpoints exactly by using max-[767.98px]: instead of the rounded value here.
  • Keep the framework's collapse JS and let it toggle .show; add [&.show]:flex if you need a utility to respond to it.
  • Apply the same glass class list to .dropdown-menu for a matching frosted panel.

Gotchas — read before shipping

  • Tailwind v4's utilities are layered; unlayered Bootstrap wins every conflict. Fix it with layer order or the important modifier — not with more specific selectors.
  • Bootstrap's .bg-* utilities set opaque backgrounds that kill backdrop-filter outright. Remove them from the navbar.
  • Re-add :focus-visible rings. Framework resets frequently suppress them, and a glass navbar with no visible focus state is unusable by keyboard.
  • Two resets can fight: Tailwind's Preflight and Bootstrap's Reboot both normalise. Load one, or scope Preflight out if the double reset changes your typography.
  • Keep the navbar fill translucent. This sounds obvious and is still the single most common reason a ported glass navbar renders flat.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Tailwind v4 sets the floor, which is higher than Bootstrap 5's own support matrix — worth knowing before you ship the pair together. Without backdrop-filter the navbar degrades to a tinted solid bar.

Techniques used in this demo

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →