~/css/tailwind-glass-navbars

6 Tailwind Glass Navbars

6 TailwindPublished 2026-10-05Free · no sign-up

Six frosted-glass navigation bars: a floating pill over colourful shapes, a light frosted bar, a sticky header that blurs content scrolling beneath, a brand-tinted bar, a mobile bottom tab bar and a dark bar with a glass search field.

Filter demos

01. Tailwind Floating Glass Navbar

TailwindGlassNavbar

A pill-shaped navbar floating over colourful shapes, made from bg-slate-950/55, backdrop-blur-xl and a thin white ring. The dark tint is strong enough that white links stay readable over the bright shapes behind.

View code

<div class="relative h-56 w-full max-w-sm overflow-hidden rounded-2xl bg-slate-900 p-3">
  <span aria-hidden="true" class="absolute -left-4 top-1 size-28 rounded-full bg-fuchsia-500"></span>
  <span aria-hidden="true" class="absolute -right-4 top-6 size-24 rounded-full bg-cyan-400"></span>
  <nav aria-label="Main" class="relative flex items-center justify-between rounded-full bg-slate-950/55 px-4 py-2 ring-1 ring-white/20 backdrop-blur-xl">
    <a href="#home" class="font-black text-white">Halo</a>
    <div class="flex gap-1 text-sm"><a href="#work" aria-current="page" class="rounded-full bg-white/15 px-3 py-1 font-semibold text-white">Work</a><a href="#blog" class="rounded-full px-3 py-1 text-slate-100 hover:bg-white/10">Blog</a><a href="#about" class="rounded-full px-3 py-1 text-slate-100 hover:bg-white/10">About</a></div>
  </nav>
  <p class="relative mt-20 rounded-lg bg-slate-950/70 p-3 text-center text-sm text-white">Content slides under the floating bar.</p>
</div>

02. Tailwind Light Frosted Navbar

TailwindGlassLight

A bright frosted bar for light pages: bg-white/70 with backdrop-blur-lg and a faint shadow, with dark slate links. The blur softens the warm shapes behind into a glow while the text keeps full contrast.

View code

<div class="relative h-48 w-full max-w-sm overflow-hidden rounded-2xl bg-amber-100 p-3">
  <span aria-hidden="true" class="absolute left-6 top-0 size-24 rounded-full bg-rose-400"></span>
  <span aria-hidden="true" class="absolute right-8 top-4 size-20 rounded-full bg-orange-400"></span>
  <nav aria-label="Main" class="relative flex items-center justify-between rounded-xl bg-white/70 px-4 py-2.5 shadow-sm ring-1 ring-black/5 backdrop-blur-lg">
    <a href="#home" class="font-black text-slate-900">Sundae</a>
    <div class="flex gap-4 text-sm font-semibold text-slate-700"><a href="#menu" class="hover:text-slate-950">Menu</a><a href="#visit" class="hover:text-slate-950">Visit</a></div>
  </nav>
</div>

03. Tailwind Sticky Glass Header on Scroll

TailwindGlassSticky

Scroll the panel and the colourful content blurs as it passes under a sticky glass header. sticky top-0 keeps the header in place and backdrop-blur-md with backdrop-saturate-150 gives it the frosted look.

View code

<div role="region" aria-label="Glass header demo" tabindex="0" class="h-60 w-full max-w-sm overflow-y-auto rounded-2xl bg-white ring-1 ring-slate-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600">
  <header class="sticky top-0 z-10 flex items-center justify-between border-b border-white/40 bg-white/60 px-4 py-3 backdrop-blur-md backdrop-saturate-150"><b class="text-slate-900">Journal</b><a href="#subscribe" class="rounded-full bg-slate-900 px-3 py-1 text-xs font-semibold text-white">Subscribe</a></header>
  <div class="grid gap-3 p-4">
    <article class="h-24 rounded-xl bg-gradient-to-r from-pink-500 to-orange-400 p-3 font-bold text-white">Spring recipes</article>
    <article class="h-24 rounded-xl bg-gradient-to-r from-sky-500 to-indigo-500 p-3 font-bold text-white">Coastal walks</article>
    <article class="h-24 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-600 p-3 font-bold text-white">Garden diary</article>
  </div>
</div>

04. Tailwind Tinted Glass Navbar

TailwindGlassTinted

Glass with a colour: bg-indigo-500/25 and an indigo ring give the bar a violet tint that matches the brand, while the current page gets a brighter pill. Light indigo text keeps contrast on the dark scene.

View code

<div class="relative h-48 w-full max-w-sm overflow-hidden rounded-2xl bg-gradient-to-br from-indigo-950 to-slate-950 p-3">
  <span aria-hidden="true" class="absolute right-6 top-2 size-24 rounded-full bg-violet-500/70"></span>
  <nav aria-label="Main" class="relative flex items-center gap-1 rounded-2xl bg-indigo-500/25 p-1.5 text-sm ring-1 ring-indigo-300/30 backdrop-blur-xl">
    <a href="#home" class="mr-auto px-3 font-black text-white">Nebula</a>
    <a href="#docs" aria-current="page" class="rounded-xl bg-indigo-400/30 px-3 py-1.5 font-semibold text-white">Docs</a>
    <a href="#api" class="rounded-xl px-3 py-1.5 text-indigo-100 hover:bg-white/10">API</a>
  </nav>
</div>

05. Tailwind Glass Bottom Tab Bar

TailwindGlassMobile

A mobile tab bar floating at the bottom of the screen on frosted glass. It is absolutely positioned inside the app frame here; in a real app use fixed bottom-0 with padding for the device's safe area.

View code

<div class="relative h-60 w-full max-w-[280px] overflow-hidden rounded-[28px] bg-[linear-gradient(160deg,#fde68a,#f472b6_50%,#6366f1)] ring-1 ring-black/10">
  <nav aria-label="App" class="absolute inset-x-3 bottom-3 grid grid-cols-4 rounded-2xl bg-white/75 py-2 text-center text-xs font-semibold shadow-lg ring-1 ring-black/5 backdrop-blur-xl">
    <a href="#home" aria-current="page" class="grid justify-items-center gap-0.5 text-indigo-700"><span aria-hidden="true" class="text-lg">⌂</span>Home</a>
    <a href="#search" class="grid justify-items-center gap-0.5 text-slate-700"><span aria-hidden="true" class="text-lg">⌕</span>Search</a>
    <a href="#saved" class="grid justify-items-center gap-0.5 text-slate-700"><span aria-hidden="true" class="text-lg">♡</span>Saved</a>
    <a href="#me" class="grid justify-items-center gap-0.5 text-slate-700"><span aria-hidden="true" class="text-lg">☺</span>Me</a>
  </nav>
</div>

06. Tailwind Glass Navbar with Search

TailwindGlassSearch

A dark glass bar holding a logo and a glass search field that brightens on focus. The field has a proper accessible name, and its placeholder is light enough to read on the tinted glass.

View code

<div class="relative h-48 w-full max-w-sm overflow-hidden rounded-2xl bg-slate-900 p-3">
  <span aria-hidden="true" class="absolute -left-6 top-2 size-28 rounded-full bg-emerald-500/80"></span>
  <span aria-hidden="true" class="absolute right-0 top-8 size-20 rounded-full bg-sky-500/80"></span>
  <nav aria-label="Main" class="relative flex items-center gap-3 rounded-xl bg-slate-950/60 px-3 py-2 ring-1 ring-white/15 backdrop-blur-xl">
    <a href="#home" class="font-black text-white">Moss</a>
    <form role="search" class="min-w-0 flex-1"><input type="search" aria-label="Search the shop" placeholder="Search" class="w-full rounded-lg bg-white/10 px-3 py-1.5 text-sm text-white ring-1 ring-white/15 placeholder:text-slate-300 focus:bg-white/20 focus:outline-none focus:ring-2 focus:ring-emerald-300"></form>
  </nav>
</div>

About these Tailwind Glass Navbars

Three utilities make glass

A translucent background such as bg-white/70 or bg-slate-950/55, backdrop-blur-lg and a thin ring like ring-1 ring-white/20.

Tint for contrast

Glass is only readable if its tint is strong enough: dark glass with white text, or light glass with dark text. Check over the brightest part of the background.

Sticky glass

sticky top-0 with backdrop-blur-md blurs the page as it scrolls underneath; add backdrop-saturate-150 for richer colour.

Mark the current page

Use aria-current="page" and a brighter pill, so the active link is clear in both looks and markup.

Frequently asked questions

Does backdrop-blur work everywhere?

Yes, in all current browsers. Without it the tints alone keep the text readable.

Is blur slow?

A navbar-sized blur is cheap; avoid blurring very large areas.

Is there a CSS version?

Yes, see the CSS glass navbars collection.