Liquid Glass Navbar — Free FLIP-Animated Pill Nav Snippet

Apple's "Liquid Glass" material, introduced across iOS and macOS 26, is built from two visual ingredients layered together: heavy translucency via backdrop blur, and a soft specular sheen that makes the surface look like it is catching light rather than just sitting flat. This snippet recreates both with plain CSS — backdrop-filter: blur(20px) saturate(160%) on the navbar itself for the glass body, and a separate radial-gradient .lg-sheen layer for the highlight — then adds the piece that actually makes a pill nav feel alive: an active-tab indicator that morphs between tabs instead of just fading in and out.

Why morphing instead of fading

A fading indicator (opacity 0 to 1 on a new pill, opacity 1 to 0 on the old one) reads as two separate objects taking turns. A morphing indicator — one that visibly slides and resizes from the old tab's exact position and width to the new tab's position and width — reads as one continuous object, which is the actual "liquid" quality the aesthetic is named for. Getting that right means animating from real, measured layout values, not guessed ones.

The FLIP technique, step by step

FLIP stands for First, Last, Invert, Play, and it is the standard trick for animating layout changes smoothly. First: before doing anything, pill.getBoundingClientRect() records the pill's current on-screen box. Last: the pill is then instantly (with transition: none) repositioned to match the new target tab's real left and width, and its box is measured again — this is where the element ends up, with no animation yet. Invert: the delta between the first and last positions is computed (deltaX, plus a scaleX ratio for the width change), and applied as a transform. Because a transform is applied that exactly cancels out the jump, the pill visually appears to still be in its old spot even though its real left/width have already changed underneath. Play: a transition is set on transform only, and the transform is reset to identity (translateX(0) scaleX(1)) — the browser now animates from the inverted position back to the true position, which the eye reads as a smooth morph from old tab to new tab.

Why animate transform instead of left/width directly

You could skip FLIP entirely and just transition left and width with CSS. That works, but those are layout-triggering properties — the browser has to recompute geometry on every frame, which gets janky under load and cannot be handed off to the compositor thread. transform (translate and scale) can be composited independently of layout, so the FLIP version stays smooth even on a busy page. This matters far more in real apps than in this small demo: the same FLIP pattern is what keeps drag-and-drop reordering, filtered grid reflows, and shared-element page transitions smooth in production UIs.

The forced reflow gotcha

Between writing the inverted transform and writing the identity transform, the code calls pill.getBoundingClientRect() again purely to force a synchronous layout flush. Without it, the browser may batch both style writes together before ever painting the inverted state, and the transition has nothing to animate from — the pill would just snap to its final position with no visible motion. This is one of the most common FLIP bugs and worth knowing by name.

Backdrop blur, saturation, and the inset highlight

The glass body pairs blur(20px) with saturate(160%), which is what gives translucent Apple-style surfaces their slightly punchier, more vivid color underneath the blur rather than looking washed out. A subtle inset 0 1px 1px rgba(255,255,255,0.6) box-shadow adds a hairline top highlight that reads as a curved glass edge catching light, and the same trick is repeated on the pill itself so it looks like a distinct glass layer floating above the bar, not just a flat color fill.

Pointer-tracked sheen for extra polish

On mousemove, the sheen's radial-gradient position is recalculated from the cursor's percentage position within the navbar and written directly to background. This is deliberately simple — no requestAnimationFrame loop is needed since mousemove already fires at a usable rate — and it makes the glass feel like a physical reflective surface responding to where you are looking, rather than a static texture.