July 30, 2026   Permalink

When Apple first unveiled the Liquid Glass design language last year, I went on record as being hugely excited about this shift away from 2010s-era “flat design”. I wrote for The Internet Review that “I’m finding myself drawn once again to the glory days of dimensional UI design” and revisiting what I loved most about UI design 20+ years ago. And regarding valid complaints of Liquid Glass introducing visual accessibility problems, I tooted “Readability problems will get worked out, I’m sure.”

Ahem. 🤨

But here we are in 2026, and it’s the dawn of Apple’s first major refinement of Liquid Glass as found in the i(Pad)OS 27 release cycle. I’m not sure folks are appreciating just how different this new version is. The changes may appear subtle at first, but they’re in fact quite profound—and they reflect a direction I’d hoped Apple would take all along: the resurrection of Aqua.

Liquid Glass 2.0, or Liquid Aqua as I’ll be calling it, plays with faint dark contrasting borders on the horizontal axis for a welcome visual separation between the control and the background, and gradation in the vertical to add a splash of glow to the top & bottom. This is very different from Liquid Glass 1.0 which used a diagonal light source metaphor and lacked the dark contrasting borders which make everything feel a bit fuzzy and ghostly. (And on macOS, there was even more weirdness in the earlier round of work—like the fact that toolbar controls didn’t even look like glass at all!)

So much better, although the glass look still doesn’t translate on macOS to all of the various UI controls like standard buttons, dropdowns, tabs, etc. Boo Apple. I want Aqua everywhere!!

Anyway, here are some light/dark screenshots of Liquid Aqua at work in Apple’s latest OS (showing the map mode of the Photos app):

As you can see, the sides of the controls have a darker border while the top & bottom have a lighter border. It’s one of those things you might not even process intellectually unless you really look closely, as I did while trying to replicate this in CSS. But it’s a great effect.

The glow effect along the top & bottom is equally pleasing, adding dimensionality without feeling over the top. It harkens back to Aqua 1.0 without going full glossy and lickable:

Perhaps the version of Aqua in Snow Leopard is the best past example of the vibe we’re now seeing return in Liquid Aqua, with its more subtle shadowing and gradation:

With that preamble, let’s take a look at a CSS replication of the Liquid Aqua styling. (FYI, on my devices I set the Liquid Glass appearance slider is part-way towards total frost, which I think looks best overall.)

🔎 You can play with the CodePen demo here, or keep reading for dev notes.

Some of the aspects of Liquid Aqua we’re able to capture in a web context:

• A control shade that is a little bit lighter than the surrounding background (this only inverts when the background is white essentially)
• Contrast provided by the dark left/right borders
• Gradation to add glow to the top and the bottom…note that this is likely simplified from Apple’s exact gradient which may have quite a few stops of minute percentage points and perhaps slight curvature on the rounded ends. The one thing I did try to do was to push the darkest part of the gradient a bit higher than the middle. I think that looks totally dope and very much Aqua-ified.

Let’s look at a darker context with a photo background:

A few things going on here:

• Really nice to have a bit of backdrop blur filtering. While we don’t get all the refractive glass effects, I think it’s “good enough” (especially in a web context).
• Because simply adding a bit of “white” to brighten the control can cause some muddy color issues, we’re also adding saturation to the backdrop filtering. That’s what you see on the left control.
• On the middle control, we’ve intentionally mixed in a bit of a cyan tone to match the overall water rather than the reddish tones of the tree branches. And on the right control, we’re mixing that tone in even more. Obviously, from a CSS perspective, you’d have to “know” what color to mix in. This could be difficult in a dynamic content environment, unless you have add a way to measure photographic tones programmatically.

When you use these controls and slowly click using either a mouse or in a touchscreen environment, you’ll notice I’ve replicated the enlargement effect as well as brightening up the control. In the real Liquid Glass implementation, there’s an effect where it’s a bit brighter right where you’re clicking rather than the brightening being uniform, but that seems unrealistic to replicate in CSS without JavaScript & math hackery.

Some additional general tech notes:

• Using @property really helps with setting types & default values for the various CSS variable involved.
• I found that you have to keep repeating :active in the stylesheet because of some weirdness with CSS variables not inheriting or something. Annoying, but not the end of the world.
• On touchscreens, buttons don’t work right with the :active state unless you disable the ontouchstart event with a blank HTML attribute.

Overall, there’s not a ton of strange CSS at work here, but all of the values involved in terms of color, transparency, gradient stops, shadowing, etc. are extremely dialed-in and require a lot of finesse. You could spend hours tweaking various parameters to change the feel of these controls in interesting and subtle ways—making them more or less glassy, or adding “fluid”, or adding splashes of different color glows.

That’s what makes this style really fun, and ultimately my design goal wouldn’t be to replicate “Liquid Glass 2.0” exactly in a web app (unless perhaps this was destined for a web view inside of an app wrapper), but use it as inspirational starting point. You could do a lot worse than copying Apple’s design language and then stretching it in one or more directions a bit.

Just make sure you don’t replicate the original criticism of Liquid Glass: double-check you aren’t setting yourself up for a readability nightmare! 😆