logo80lv
Articlesclick_arrow
Research
Talentsclick_arrow
Events
Workshops
Aboutclick_arrow
profile_loginLogIn

Accurate Apple's Liquid Glass Effect Recreated With CSS & SVG

Turns out, it's not as simple as it looks.

On Monday, Apple introduced Liquid Glass, a new unified visual theme across iOS 26, bringing glass-like and liquid-y effects to interfaces. It marks the most significant visual update since the iOS 7 redesign, which continues to influence iOS today, and although it's been fairly criticized for poor readability and compared to Windows Vista's Aero Glass, Liquid Glass is going to change the way apps look going forward.

When Apple rolls out a new design, it often sparks a trend, and this time, developers online have joined in to recreate it. At first glance, Liquid Glass might not seem like a complex design, but it turns out that simply adding transparency isn't enough. CSS Developer Lyra Rebane came impressively close to replicating the look, likely using subtle chromatic aberration effects. Even more impressive, she pulled it off in under an hour: Samsung and others have nothing on her. Rebane also shared the code on GitHub and created an interactive demo on CodePen so others could explore it for themselves.

See more examples of Liquid Glass recreation attempts, a glimpse of the many you can find online:

Also, join our 80 Level Talent platform and our new Discord server, follow us on InstagramTwitterLinkedInTelegramTikTok, and Threads, where we share breakdowns, the latest news, awesome artworks, and more.

Join discussion

Comments 0

    You might also like

    We need your consent

    We use cookies on this website to make your browsing experience better. By using the site you agree to our use of cookies.Learn more