~/css/tailwind-liquid-glass

6 Tailwind Liquid Glass

5 Tailwind1 with JSPublished 2026-10-05Free · no sign-up

Six liquid glass components in Tailwind: a card with a bright rim, a button like a drop of glass, floating playback controls, a segmented control, a notification banner and a search pill over a scene.

Filter demos

01. Tailwind Liquid Glass Card

TailwindLiquid glassCard

The liquid glass look from utilities: backdrop-blur-2xl with backdrop-saturate-[1.8], a dark translucent tint and one arbitrary shadow combining a bright top rim, an inner glow and a soft drop shadow.

View code

<div class="relative grid h-60 w-full max-w-xs place-items-center overflow-hidden rounded-[22px] bg-gradient-to-br from-sky-900 to-indigo-950">
  <span aria-hidden="true" class="absolute left-5 top-2 size-36 rounded-full bg-cyan-400"></span>
  <span aria-hidden="true" class="absolute bottom-0 right-2 size-32 rounded-full bg-pink-400"></span>
  <article class="relative w-56 max-w-[90%] rounded-3xl bg-slate-900/30 p-5 text-white shadow-[inset_0_1px_0_rgba(255,255,255,.6),inset_0_-1px_0_rgba(255,255,255,.12),inset_0_0_22px_rgba(255,255,255,.12),0_16px_34px_-14px_rgba(0,0,0,.6)] backdrop-blur-2xl backdrop-saturate-[1.8] [text-shadow:0_1px_2px_rgba(0,0,0,.35)]">
    <p class="text-xs text-sky-100">Now playing</p><h3 class="mt-1 text-xl font-bold">Glass Garden</h3><p class="text-sm">Aria Lune · 3:42</p>
  </article>
</div>

02. Tailwind Liquid Glass Button

TailwindLiquid glassButton

A pill button like a drop of glass: a bright top highlight, a faint glow at the bottom and a slight squash on press with active:scale-x-[.96] active:scale-y-[.92]. A dark tint and a text shadow keep the label readable.

View code

<div class="grid h-40 w-full max-w-xs place-items-center rounded-[22px] bg-[radial-gradient(circle_at_30%_40%,#f97316,transparent_45%),radial-gradient(circle_at_70%_60%,#6366f1,transparent_45%),linear-gradient(#0f172a,#0f172a)]">
  <button type="button" class="rounded-full bg-gradient-to-b from-white/20 to-slate-900/25 px-8 py-3.5 font-bold text-white shadow-[inset_0_1px_1px_rgba(255,255,255,.75),inset_0_-6px_12px_rgba(255,255,255,.08),0_10px_20px_-10px_rgba(0,0,0,.6)] backdrop-blur-xl backdrop-saturate-[1.8] transition-transform duration-150 [text-shadow:0_1px_2px_rgba(0,0,0,.5)] active:scale-x-[.96] active:scale-y-[.92] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-white motion-reduce:transition-none">Continue</button>
</div>

03. Tailwind Liquid Glass Media Controls

TailwindLiquid glassPlayer

Floating playback controls on a glass capsule over artwork. The play button toggles its accessible name between Play and Pause, and the glass is tinted dark so the white icons stay clear.

View code

<div class="grid h-48 w-full max-w-xs place-items-end overflow-hidden rounded-[26px] bg-[linear-gradient(160deg,#f472b6,#7c3aed_55%,#1e1b4b)] p-4">
  <div class="flex w-full items-center justify-center gap-4 rounded-full bg-slate-950/35 py-2 text-white shadow-[inset_0_1px_0_rgba(255,255,255,.55),0_10px_24px_-12px_rgba(0,0,0,.6)] backdrop-blur-2xl backdrop-saturate-[1.6]">
    <button type="button" aria-label="Previous track" class="grid size-10 place-items-center rounded-full hover:bg-white/15 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white">⏮</button>
    <button id="twlg3" type="button" aria-label="Play" class="grid size-12 place-items-center rounded-full bg-white/25 text-xl shadow-[inset_0_1px_0_rgba(255,255,255,.7)] hover:bg-white/35 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white">▶</button>
    <button type="button" aria-label="Next track" class="grid size-10 place-items-center rounded-full hover:bg-white/15 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white">⏭</button>
  </div>
</div>

var p = document.getElementById('twlg3');
p.onclick = function () { var play = p.getAttribute('aria-label') === 'Play'; p.setAttribute('aria-label', play ? 'Pause' : 'Play'); p.textContent = play ? '⏸' : '▶'; };

04. Tailwind Liquid Glass Segmented Control

TailwindLiquid glassSegmented

A segmented control of three radio buttons on frosted glass, with the chosen segment raised as a brighter capsule using has-[:checked]. Arrow keys move between options because they are real radios.

View code

<div class="grid h-40 w-full max-w-xs place-items-center rounded-[24px] bg-[linear-gradient(#a7f3d0,#67e8f9_50%,#c4b5fd)]">
  <fieldset class="flex rounded-full bg-white/50 p-1 text-sm font-semibold text-slate-800 shadow-[inset_0_1px_0_#fff,0_10px_24px_-12px_rgba(15,23,42,.4)] backdrop-blur-xl">
    <legend class="sr-only">View</legend>
    <label class="cursor-pointer rounded-full px-4 py-1.5 has-[:checked]:bg-white/90 has-[:checked]:text-slate-950 has-[:checked]:shadow-[inset_0_1px_0_#fff,0_2px_6px_rgba(15,23,42,.15)] has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-slate-900"><input type="radio" name="twlg4" class="sr-only" checked>Day</label>
    <label class="cursor-pointer rounded-full px-4 py-1.5 has-[:checked]:bg-white/90 has-[:checked]:text-slate-950 has-[:checked]:shadow-[inset_0_1px_0_#fff,0_2px_6px_rgba(15,23,42,.15)] has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-slate-900"><input type="radio" name="twlg4" class="sr-only">Week</label>
    <label class="cursor-pointer rounded-full px-4 py-1.5 has-[:checked]:bg-white/90 has-[:checked]:text-slate-950 has-[:checked]:shadow-[inset_0_1px_0_#fff,0_2px_6px_rgba(15,23,42,.15)] has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-slate-900"><input type="radio" name="twlg4" class="sr-only">Month</label>
  </fieldset>
</div>

05. Tailwind Liquid Glass Notification

TailwindLiquid glassNotification

A notification banner on light glass, as it might drop down over a wallpaper: an app icon, a title, a short message and the time. The light tint with dark text reads well over the bright background.

View code

<div class="grid h-48 w-full max-w-xs place-items-start overflow-hidden rounded-[26px] bg-[linear-gradient(170deg,#fde68a,#fb923c_45%,#db2777)] p-3">
  <div role="status" class="flex w-full items-start gap-3 rounded-[20px] bg-white/70 p-3 shadow-[inset_0_1px_0_#fff,0_12px_24px_-12px_rgba(0,0,0,.4)] backdrop-blur-2xl backdrop-saturate-150">
    <span aria-hidden="true" class="grid size-9 shrink-0 place-items-center rounded-xl bg-emerald-600 text-white">✓</span>
    <div class="min-w-0 flex-1"><div class="flex justify-between gap-2"><p class="text-sm font-semibold text-slate-900">Orders</p><p class="text-xs text-slate-700">now</p></div><p class="truncate text-sm text-slate-800">Order #1042 was delivered to your door.</p></div>
  </div>
</div>

06. Tailwind Liquid Glass Search Pill

TailwindLiquid glassSearch

A glass search field floating over a photo-like scene, with a search icon and a bright rim. The input's text and placeholder sit on a dark tint, and the focus state brightens the whole pill with focus-within.

View code

<div class="grid h-44 w-full max-w-xs place-items-center overflow-hidden rounded-[24px] bg-[linear-gradient(#0ea5e9,#0369a1_40%,#065f46_41%,#022c22)] p-4">
  <form role="search" class="flex w-full items-center gap-2 rounded-full bg-slate-950/40 px-4 py-2.5 text-white shadow-[inset_0_1px_0_rgba(255,255,255,.55),0_10px_24px_-12px_rgba(0,0,0,.6)] backdrop-blur-2xl focus-within:bg-slate-950/55 focus-within:ring-2 focus-within:ring-white/70">
    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="size-5 shrink-0"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input type="search" aria-label="Search places" placeholder="Search places" class="min-w-0 flex-1 bg-transparent text-sm text-white placeholder:text-slate-200 focus:outline-none">
  </form>
</div>

About these Tailwind Liquid Glass

Blur plus saturation

backdrop-blur-2xl backdrop-saturate-[1.8] blurs and enriches the colours behind, the base of the liquid look.

Light from inset shadows

One arbitrary shadow holds a bright top rim, a faint inner glow and a drop shadow: shadow-[inset_0_1px_0_…,inset_0_0_22px_…,0_16px_34px_…].

Tint for the scene

Dark tints such as bg-slate-950/35 with white text over colourful scenes; light tints such as bg-white/70 with dark text over bright ones.

Real controls underneath

Buttons, radios and search inputs keep their native behaviour; the glass is only styling.

Frequently asked questions

Is this Apple's Liquid Glass?

It is an original Tailwind take on the glossy glass trend, not a copy of any platform.

Does it need a busy background?

Glass only shows against colour or images behind it.

Is there a CSS version?

Yes, see the CSS liquid glass collection.