Liquid Glass and the new look of interfaces: borrow the feeling, keep it usable
When Apple changes its design language, the rest of the digital world follows within months. Here's how to bring the fresh, layered feel to your website without hurting readability or speed.
By the Xuru Technologies team · 11 June 2025
Key takeaways
- On 9 June 2025 Apple unveiled Liquid Glass, a translucent material that reflects and refracts what's behind it, across iOS, iPadOS, macOS and more.
- Apple also introduced a Foundation Models framework letting apps use its on-device AI.
- Expect softer, layered, depth-rich interfaces to influence web design.
- Accessibility — contrast and readability — must not be sacrificed for the effect.
Design trends signal modernity. Customers notice when a website feels a few years old, even if they can't say why.
What happened
As Yanko Design and Design Milk described, Liquid Glass brings dynamic translucency to controls, toolbars and navigation, adapting to content and light. It is Apple's broadest design update in more than a decade.
What it means for websites
- Depth is back. Layers, soft shadows and subtle motion make interfaces feel tactile.
- Content comes first. Translucent controls aim to keep focus on photos and text.
- Readability risks. Text over busy, see-through backgrounds can fail contrast requirements.
- Performance matters. Heavy blur effects can slow older phones.
How to apply the trend well
| Do | Don't |
|---|---|
| Use depth and soft surfaces for cards and navigation | Put body text on transparent, busy backgrounds |
| Add gentle motion that responds to scrolling | Animate everything; respect "reduce motion" settings |
| Test contrast with real content | Rely on effects to carry your message |
| Keep pages fast on mid-range phones | Stack heavy blur filters |
Frequently asked questions
Should we redesign our website because of Liquid Glass?
Not just for a trend. If your site already needs a refresh, it's a good moment to adopt a cleaner, more layered style.
Is translucent design accessible?
It can be, with sufficient contrast, solid fallbacks for text and respect for user settings like reduced transparency and motion.
Will web browsers support these effects?
Modern browsers support blur and layered effects through CSS, though performance varies, so use them selectively.
Fresh, tactile design that stays readable.
We design websites with depth, motion and personality — tested for speed and accessibility on real devices.
Websites, payments, digital marketing, AI automation, consultancy and practical technology training — for businesses and aspiring professionals worldwide.
Saturday – Sunday: closed
Leave a Reply