24 Tailwind Liquid Glass Navbars
23 / 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 Minimalist Dual-Border Glass Header

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.

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-23 grid place-items-center w-full min-h-svh p-5 font-nb23-sans bg-[linear-gradient(120deg,#485563,#29323c_60%,#7b6b8f)]" aria-label="Minimalist dual border glass header demo">
  <header class="flex flex-wrap items-center gap-x-6 gap-y-3 w-[min(720px,100%)] px-5 py-3.75 rounded-[14px] text-white bg-white/[0.08] border border-white/[0.55] inset-ring inset-ring-white/[0.75] shadow-[inset_0_-1px_0_rgba(255,255,255,.3),0_18px_36px_-22px_rgba(0,0,0,.55)] backdrop-blur-[14px] backdrop-saturate-150">
    <span class="text-[15px] font-bold tracking-[0.02em] text-white/95">— clear</span>
    <nav class="flex flex-wrap gap-0.5 ms-auto" aria-label="Primary">
      <a class="flex items-center min-h-10 px-3.25 rounded-lg no-underline text-white/[0.66] text-sm font-medium tracking-[0.01em] transition-[color,background-color] duration-200 hover:text-white hover:bg-white/[0.08] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 aria-[current=page]:text-white" href="#nbtw-23" aria-current="page">Index</a>
      <a class="flex items-center min-h-10 px-3.25 rounded-lg no-underline text-white/[0.66] text-sm font-medium tracking-[0.01em] transition-[color,background-color] duration-200 hover:text-white hover:bg-white/[0.08] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-23">Work</a>
      <a class="flex items-center min-h-10 px-3.25 rounded-lg no-underline text-white/[0.66] text-sm font-medium tracking-[0.01em] transition-[color,background-color] duration-200 hover:text-white hover:bg-white/[0.08] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-23">Info</a>
    </nav>
    <a class="flex items-center min-h-10 px-3.25 rounded-lg no-underline text-white/90 text-sm font-medium tracking-[0.01em] border border-white/[0.28] shadow-[inset_0_1px_0_rgba(255,255,255,.4)] transition-[color,background-color] duration-200 hover:text-white hover:bg-white/[0.08] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-23">Contact →</a>
  </header>
</section>
@import "tailwindcss";

@theme {
  --font-nb23-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 {
  --font-nb23-sans: system-ui, 'Segoe UI', sans-serif;
}

What changed in the port

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

  • This is where v4's inset-ring earns its place: the inner face of the pane becomes a named utility instead of an arbitrary inset shadow, and the two edges read as a pair in the class list.
  • Four expressions of light, in order: outer face, inner face, faint bottom return, ambient shadow. There is nothing else to the design.
  • The inner highlight paints over the fill, which is why it must be a ring or inset shadow and never a second border — a real second border reads as a doubled outline.
  • The blur is the lightest in the collection at 14px, on purpose. Restraint is the design brief, and a heavy frost contradicts it.
  • Links sit at 66% white until hover, so the bar guides by contrast rather than fills — check that alpha against your real backdrop, it is close to the floor.
  • The focus ring is the one element left at full strength. Quiet styling is exactly where faint focus states sneak in.
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 Minimalist Dual-Border Glass Header
Source: https://codefronts.com/navigation/tailwind-liquid-glass-navbars/tailwind-minimalist-dual-border-glass-header/

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 &mdash; the inner edge becomes a real utility instead of an arbitrary inset shadow.
## HTML
```html
<section class="nbtw-23 grid place-items-center w-full min-h-svh p-5 font-nb23-sans bg-[linear-gradient(120deg,#485563,#29323c_60%,#7b6b8f)]" aria-label="Minimalist dual border glass header demo">
  <header class="flex flex-wrap items-center gap-x-6 gap-y-3 w-[min(720px,100%)] px-5 py-3.75 rounded-[14px] text-white bg-white/[0.08] border border-white/[0.55] inset-ring inset-ring-white/[0.75] shadow-[inset_0_-1px_0_rgba(255,255,255,.3),0_18px_36px_-22px_rgba(0,0,0,.55)] backdrop-blur-[14px] backdrop-saturate-150">
    <span class="text-[15px] font-bold tracking-[0.02em] text-white/95">— clear</span>
    <nav class="flex flex-wrap gap-0.5 ms-auto" aria-label="Primary">
      <a class="flex items-center min-h-10 px-3.25 rounded-lg no-underline text-white/[0.66] text-sm font-medium tracking-[0.01em] transition-[color,background-color] duration-200 hover:text-white hover:bg-white/[0.08] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 aria-[current=page]:text-white" href="#nbtw-23" aria-current="page">Index</a>
      <a class="flex items-center min-h-10 px-3.25 rounded-lg no-underline text-white/[0.66] text-sm font-medium tracking-[0.01em] transition-[color,background-color] duration-200 hover:text-white hover:bg-white/[0.08] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-23">Work</a>
      <a class="flex items-center min-h-10 px-3.25 rounded-lg no-underline text-white/[0.66] text-sm font-medium tracking-[0.01em] transition-[color,background-color] duration-200 hover:text-white hover:bg-white/[0.08] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-23">Info</a>
    </nav>
    <a class="flex items-center min-h-10 px-3.25 rounded-lg no-underline text-white/90 text-sm font-medium tracking-[0.01em] border border-white/[0.28] shadow-[inset_0_1px_0_rgba(255,255,255,.4)] transition-[color,background-color] duration-200 hover:text-white hover:bg-white/[0.08] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2" href="#nbtw-23">Contact →</a>
  </header>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --font-nb23-sans: system-ui, 'Segoe UI', sans-serif;
}
```

How this works

The dual border is one outer edge and one inner edge. In the hand-written version both are shadows; in v4 the inner one has a utility of its own:

class="border border-white/[0.55]
       inset-ring inset-ring-white/[0.75]
       shadow-[inset_0_-1px_0_rgba(255,255,255,.3),0_18px_36px_-22px_rgba(0,0,0,.55)]"

Reading top to bottom that is: the outer face of the glass, the inner face catching light, a faint bottom return, and the ambient shadow underneath. Four lines of light and nothing else.

Restraint is the design. There is no fill to speak of (bg-white/[0.08]), the blur is the lowest of any demo here, and links are quiet until hover. Everything that could shout has been turned down by one step, deliberately.

The inner highlight has to be on top. An inset ring or shadow paints over the fill; a second real border would sit outside it and read as a doubled outline rather than a pane. That ordering is the whole illusion.

Even here, the focus ring stays loud. The one place restraint is wrong is the keyboard state, so focus-visible:outline-2 outline-white is left at full strength against the muted palette.

Make it yours

  • Adjust the two edge alphas to strengthen or soften the pane illusion; the outer face is the one that reads as thickness.
  • Add a faint bottom inner shadow (already present here at 30%) or raise it for a thicker-looking pane.
  • Keep it monochrome, or tint the inner highlight for coloured glass — a slight warm tint reads as older glass.
  • Lower the blur further ([10px]) for the most minimal version, or raise it if your backdrop is busy.
  • Square the corners with rounded-lg for an editorial feel; the light treatment survives any radius.

Gotchas — read before shipping

  • The inner highlight must paint over the fill — use inset-ring or an inset shadow, never a second real border, or you get a doubled outline instead of a pane.
  • Do not over-blur. Minimalism wants a light frost; at 24px the effect stops being restrained and starts being a slab.
  • Preserve a visible focus ring. Restrained styling is exactly where faint focus states creep in, and it is the one thing here that must not be quiet.
  • text-white/[0.66] body links are close to the contrast floor on a mid-tone backdrop. Check the ratio against your real background.
  • inset-ring is v4-only. On v3 write the inner edge as an arbitrary inset shadow instead.
  • A ghost CTA at low alpha can disappear on light backdrops — test it against the lightest part of your imagery.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Tailwind v4 sets the floor, and inset-ring is a v4 utility. The dual-edge treatment works everywhere; backdrop-filter is the only progressive part, and this design needs it least of any in the collection.

Techniques used in this demo

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →