Liquid glass effect in React + Tailwind

The glass in our tab bar is a backdrop blur, a saturation boost, a thin light border and an inner highlight. Here are the exact values as Tailwind classes.

Get the code · $3React · Tailwind · TypeScript
Liquid Glass Tab Bar, preview

Use it in Next.js

components/GlassBar.tsx

export function GlassBar({ children }: { children: React.ReactNode }) {
  return (
    <nav className="rounded-[32px] border border-white/15 bg-white/10 p-2 shadow-[inset_0_1px_0_rgba(255,255,255,.25),0_10px_30px_rgba(0,0,0,.35)] backdrop-blur-[16px] backdrop-saturate-[1.9]">
      {children}
    </nav>
  );
}

app/page.tsx (the full tab bar)

"use client";
import { LiquidGlassTabBar } from "@/components/LiquidGlassTabBar";

export default function Page() {
  return <LiquidGlassTabBar autoplayDemo={false} onTabChange={(id) => console.log(id)} />;
}

Good to know

  • These values come from the tab bar's CSS: blur(16px) saturate(1.9) on a slightly white background, with a 32 px radius.
  • This isn't Apple's refraction. Real lens bending needs SVG displacement filters, which not every browser applies to backdrops. Blur and saturate work in Safari, Chrome and Firefox.
  • Glass needs something colourful behind it. On a flat background it reads as grey.
  • Backdrop blur costs GPU time. The tab bar switches the blur off while its lens and player states are open.

Install

  1. Copy from the zipPut react/src/components + react/src/data into src/, then npm i framer-motion.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

backdrop-blur-[16px]
the frost
backdrop-saturate-[1.9]
makes colours behind it richer
bg-white/10 + border-white/15
the pane
inset shadow
the top edge highlight

How qodesign compares

All comparisons, with prices read on each library's own site.

Questions

Does it work in Safari?

Yes. Safari, Chrome and Firefox all support backdrop-filter.

Is the GlassBar snippet free to copy?

Yes, it's a few Tailwind classes. The animated tab bar with the drop and the player is the paid piece.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.