Liquid Glass

“Liquid glass” design is helped along by offsetting/scaling the background as if you’re looking through real glass. But that gets tricky with arbitrary CSS background positioning.

There was a quick surge of people re-creating liquid glass in the browser shortly after Apple’s debut of the aesthetic. Now that it’s settled in a bit, there have been some slower more detailed studies.

It’s a complicated look! There may or may not be blurring, light refracts in tricky ways, the highlights are quite bright, and you’ve got to be very careful about text contrast accessibility.