A liquid glass tab bar: the magnifying lens is a scaled copy of the bar A developer built a cross-browser liquid glass tab bar effect that reproduces Apple's magnifying lens without SVG displacement filters, which only render in Chromium. The lens is a clipped window onto a second, aria-hidden copy of the bar scaled 1.42x around the lens centre, so the icon under it appears magnified while the centre point stays fixed. The shipped component uses backdrop-filter blur with saturate(1.9) for the frosted glass and plain transforms for the magnification, and is offered as a single-file demo and reference for coding agents. Apple's liquid glass tab bars have a lens that sits on the selected tab and magnifies the icon under it. When you switch tabs it moves like a drop of water: it stretches on the way, then settles. Most web versions of this effect use an SVG displacement filter inside backdrop-filter . That only renders in Chromium browsers; Safari and Firefox skip it. I built one for a music-app demo and wanted it to look the same in every browser, so the lens uses no filter at all. It's a small window onto a second copy of the bar, scaled up 1.42 times. This post covers three pieces: backdrop-filter . There's a single-file demo at the end you can paste into CodePen. If you build with Cursor or Claude Code, it also works as a reference file to hand to your agent: it's short, and every number in it is explained here. The bar itself is ordinary frosted glass. Blur plus saturation does most of the work. The inset shadows draw a light top edge and a faint 1px rim so the bar reads as a solid object on any background. This is the CSS from the shipped component tabbar-liquid.css : .glassbar { position: absolute; border-radius: 32px; background: var --glass ; -webkit-backdrop-filter: blur 16px saturate 1.9 ; backdrop-filter: blur 16px saturate 1.9 ; box-shadow: inset 0 1px 0 rgba 255,255,255,.22 , inset 0 0 0 1px var --glass-line , 0 18px 40px rgba 0,0,0,.45 ; } saturate 1.9 matters more than it looks. Blur alone washes colours out to grey. Saturation brings back the colour of whatever scrolls underneath, which is what makes it read as glass and not as a grey panel. Keep the -webkit- prefix. Safari still wants it. Real magnification would need a displacement filter on whatever sits behind the lens. You can fake the part people actually notice, the icon under the lens getting bigger, with plain transforms: overflow: hidden so you only see the part under it. M 1.42 here around the lens centre. The markup is a lens with an inner layer that holds the copy: