20 Tailwind liquid glass effects that rebuild the macOS Tahoe / iOS 26 material from utility classes — refractive cards, glossy buttons and toggles, frosted navbars, modals and dropdowns on native <dialog> and <details>, plus pricing tables, audio players, sliders, toasts, sidebars, accordions, login and multi-step forms, and a real <feDisplacementMap> background. Scoped under .lgt-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Building a whole Tailwind app, not just this component?
You just browsed 20 Tailwind liquid glass. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
The premium product card, ported so the whole material is legible in one class list: backdrop-blur-[18px] backdrop-saturate-180 is the frost, bg-white/12 plus border-white/35 plus an inset hairline shadow is the thickness, and a before: radial gloss reads two custom properties the pointer handler writes. The 3D tilt is an arbitrary [transform:rotateX(var(--ry))_rotateY(var(--rx))], so the JS never touches a style beyond four variables.
A capsule CTA in the macOS Tahoe / iOS 26 language, and a clean demonstration of what group buys you: the sweep lives on an after: layer parked off-screen, and group-hover:after:[transform:...] plus its group-focus-visible: twin drives it across. Two buttons, one shared class string, and the primary variant differs only by its gradient fill.
A sticky bar that turns into a frosted lens as content scrolls beneath it. The port's payoff is the active state: what was a [aria-current=page] attribute selector in a stylesheet becomes an aria-[current=page]: variant sitting on the link itself, so the pill treatment and the semantics that drive it are one line apart.
A handle that behaves like liquid metal: it stretches as it travels, fuses with the track blob, then snaps into place. The whole state machine is peer plus peer-checked: on a native checkbox, and the only thing utilities cannot express — the SVG goo filter and its stretch keyframe — stays in the stylesheet where it belongs.
A dialog that frosts the entire page behind it, built on native <dialog> so focus containment and Escape-to-close come for free. The port's headline is the backdrop: variant — Tailwind styles ::backdrop directly, so the scrim's blur is a utility on the same element as the panel's.
A dark/light toggle that releases a liquid glass ripple across the scene as it flips. In the port the entire theme lives in six custom properties re-pointed by one data-theme rule, so every utility in the markup — bg-lgt06-surface, text-lgt06-fg, border-lgt06-rim — changes meaning at once and not a single class is duplicated per theme.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A sign-up form where focusing a field lights a refractive border that travels around it. The port keeps the one thing utilities genuinely cannot do — @property registering the angle as an <angle> so it can tween — in CSS, and expresses everything else, including the mask-composite rim trick, as before: utilities under a focus-within: variant.
The real thing: feTurbulence plus feDisplacementMap physically bending the image beneath the glass, with warp intensity following the cursor. Tailwind styles the panel, the stage and the layout; the filter stays SVG because displacement is geometry, not styling — and that division is exactly the point of the port.
A dropdown that snaps in like a liquid drop, built on native <details> so open/close, keyboard toggling and focus are free. The port's clean move is group on the <details> element itself: group-open: rotates the chevron and runs the panel's spring, and there is no state anywhere else.
Three tiers where only the Pro card is alive: a conic rim rotates around it and its badge pulses, while the flanking plans stay calm frosted glass. The port makes the hierarchy legible as a diff — all three cards share one class string, and Pro adds exactly four utilities.
A capsule tooltip that frosts the text behind it instead of hiding it. The port's discipline is the pairing: every group-hover: has a group-focus-visible: twin, so the hint is reachable by keyboard — the single most commonly skipped requirement in tooltip components.
The floating playbar: a compact glass card over a blown-up, heavily blurred copy of the album art it is playing. Progress is a custom property the script updates, so a ticking transport never touches a class — and the vendor slider-thumb rules, which have no utility, stay in CSS where they are honest.
A heavy glass lens sliding across a numeric scale, magnifying the value beneath it. The native range input stays on top and fully transparent so keyboard, pointer and screen-reader behaviour are untouched; every glass layer under it is decoration positioned from a single --v custom property.
Frosted toasts sliding in from the top-right and stacking without turning to mush. The port's real content is the anti-pattern it avoids: each toast gets isolate so overlapping frosts never compound, and the type variants are data-type attributes styled by variants rather than three near-identical class strings in the script.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A collapsible dashboard shell that re-tints and re-sizes itself from two checkboxes and zero JavaScript. This is the demo where v4's token model pays off hardest: has-[#lgt-15-theme:checked]: re-points the palette variables, and every bg-lgt15-surface in the markup changes meaning at once.
An FAQ where each panel is a glass card that opens fluidly — the 0fr → 1fr grid trick, written as two utilities. It is the cleanest answer to 'you cannot animate height:auto', it needs no JavaScript, and on native <details> the keyboard and screen-reader behaviour is already correct.
An auth screen where the glass has something worth refracting: a mesh of radial-gradient blobs drifting slowly behind the card, so the blur visibly shifts colour in real time. Utilities only — the whole 'wow' is a keyframe on a background layer and four glass utilities on a form.
A glass FAB that fans out into frosted sub-actions on tap, staggered like droplets. All of it is one sr-only checkbox and peer-checked: transforms — and because each sub-action carries its own delay utility, the stagger is readable in the markup instead of computed in a stylesheet.
A profile-card skeleton where the placeholders are glass rather than grey. One card-wide shimmer sweeps across all of them — a single animated layer instead of one per block, which is both cheaper and the more convincing illusion of light gliding over a surface.
An onboarding wizard whose progress dots physically merge as the fill grows toward them — the goo filter from demo 04, applied to a progress track. The port's discipline: the script sets data-active, aria-current and one custom property, and every visual consequence is a variant in the markup.
FAQ
Frequently asked questions
Which Tailwind utilities actually build the liquid glass material?
The material is a stack, not one class. Every card in this set combines backdrop-blur-[18px] (the frost), a low-opacity fill like bg-white/10 (the tint), a bright hairline via border border-white/20, an inset sheen with shadow-inner or a ring-1 ring-white/15, and a soft drop shadow to lift it off the page. The arbitrary-value syntax matters here: backdrop-blur's named scale tops out coarse, so demos reach for backdrop-blur-[18px] to hit an exact radius. The glossy highlight on the button (Demo 02) is just a pseudo-element gradient toggled with group-hover. If you copy only bg-white/10 and skip the blur, you get a flat translucent panel, not glass — the blur is what reads as a physical lens.
Why does my liquid glass look muddy grey instead of see-through?
backdrop-blur samples whatever sits behind the element, so on a plain flat background there is nothing interesting to refract and the panel collapses to a dull grey wash. The fix is content behind the glass, which is why the login card (Demo 17) drifts a mesh of radial-gradient blobs underneath and the audio player (Demo 12) floats over a blown-up, heavily blurred copy of the album art. The second cause is fill opacity: bg-white/40 is too opaque and hides the blur entirely — drop to bg-white/10 or bg-white/5 so the frosted layer stays dominant. Finally, without a bright border-white/20 edge the panel has no rim to catch light, so it reads as a smudge rather than a pane. All three — a busy backdrop, low fill, a lit edge — have to be present together.
How does the gooey merge effect on the toggle and wizard work?
That fluid fusing is an SVG filter, not a Tailwind utility. You define a filter with an feGaussianBlur to smear neighbouring shapes together, then an feColorMatrix with a steep alpha curve that snaps the blurred edges back to a hard outline — where two blurred blobs overlap, the matrix keeps them fused; where they separate, it pinches them apart. The liquid toggle (Demo 04) applies it to the handle and a track blob so the handle stretches and reconnects as it travels; the multi-step wizard (Demo 20) applies it to the progress dots so each fills and merges into the next. Tailwind's job is only the layout and the transition that animates position — you attach the filter with [filter:url(#goo)] arbitrary syntax. The blur radius and matrix slope are what tune how liquid versus how rigid it looks.
How do you get real refraction that bends the image, not just a blur?
Blur softens what is behind the glass; refraction physically displaces it, and that needs SVG. The displacement background (Demo 08) pairs feTurbulence, which generates a Perlin-noise map, with feDisplacementMap, which shifts each pixel of the source by an amount read from that noise. The result is the wobble you see in real thick glass rather than a uniform frost. You control the character with the turbulence baseFrequency — low values give slow rolling waves, high values give a pebbled texture — and the scale attribute on the displacement map sets how many pixels of shift, i.e. how strong the bend. Tailwind handles the surrounding card, the fill, and the border; the filter itself lives in an inline SVG referenced with [filter:url(#glass)]. Keep scale modest or text under the glass becomes unreadable.
Are these glass components keyboard accessible, or is it CSS-only theatre?
The interactive ones lean on native elements precisely so accessibility comes for free. The modal (Demo 05) is a real <dialog>, which gives focus containment, Escape to close, and the top-layer stacking without a JavaScript focus trap. The dropdown (Demo 09) is a native <details>/<summary>, so open and close, Enter, and Space all work and it is announced as a disclosure. The range slider (Demo 13) keeps a real range input underneath the glass lens, so arrow keys still step the value. The one thing glass fights is contrast: a translucent fill over a busy backdrop can push text below the WCAG 4.5:1 ratio, so the labels sit on a slightly more opaque inner layer. Do not rebuild these with a <div> and click handlers — you lose every one of those built-in behaviours.
Do the liquid glass animations respect prefers-reduced-motion?
They need to, because several demos run continuous or large motion — the rotating conic rim on the Pro pricing card (Demo 10), the shimmer sweep on the loading skeleton (Demo 19), the ripple across the theme switcher (Demo 06), and the stretch-and-fuse on the gooey toggle (Demo 04). In Tailwind you gate these with the motion-reduce variant, e.g. motion-reduce:animate-none to kill a looping keyframe and motion-reduce:transition-none to make a state change instantaneous rather than sliding. The rule of thumb: motion that only decorates (the conic rim, the shimmer) should stop entirely under reduced motion, while motion that communicates state (a toggle flipping, a wizard step advancing) should still land in its final position, just without the tween. The frosted look itself is static and stays, so nothing about the design is lost for users who opt out.
What is the browser support catch, and when should I not use this?
The whole style hangs on backdrop-filter. It is broadly supported now, but older engines and some in-app webviews either ignore it or need the property duplicated, so always ship a fallback fill — a solid-ish bg-white/70 under supports-[backdrop-filter]:bg-white/10 — so the component degrades to a plain frosted panel instead of a transparent hole. Skip liquid glass entirely on dense, text-heavy surfaces: a data table or a long article behind blur costs GPU on every scroll and repaint, and stacking several blurred layers compounds it, which is felt hardest on low-end mobile. It is also wrong where contrast is safety-critical — a form error, a warning banner — because the translucent fill undermines legibility. Reach for it on hero cards, navbars, modals, and players (Demos 01, 03, 05, 12) where there is a rich backdrop worth refracting.
How do you keep the active navbar and sidebar state legible through the frost?
The problem in a glass navbar (Demo 03) is that a subtle active state disappears against a translucent bar. The port solves it by making the active item its own small opaque glass pill — a brighter bg-white/20 with a stronger ring-white/30 — so it reads as raised rather than tinted, and pairs it with aria-current for non-visual users. Hover and focus are driven with the group and group-hover pattern so the label and its highlight move together in one class list. The sidebar (Demo 15) goes further: it re-tints and re-sizes from two checkboxes and zero JavaScript, using peer and peer-checked to flip width and background utilities. The discipline in both is that the active affordance is a change in opacity and ring weight, not a colour the frost would mute — that is what survives being seen through blurred glass.
