Jun 10, 2025

What Is Apple’s Liquid Glass? A Designer’s Guide to the New UI Era

Four iPhones displaying Apple’s Liquid Glass design elements across different screens—lock screen, weather widget, notes, and app icons—highlighting translucent layers, depth effects, and dynamic lighting.

What Is Liquid Glass?

Liquid Glass is Apple’s new UI design language introduced at WWDC 2025. It brings together:

  • Translucent layering (like frosted glass panels)

  • Depth through motion and blur

  • Dynamic lighting that shifts based on real-world context (especially in visionOS)

  • Soft gradients and edge treatments that feel fluid, responsive, and almost organic

It’s like glass, but alive.

Apple just changed the rules of interface design, again. With the introduction of Liquid Glass, a new design language rolling out across iOS, macOS, and visionOS, we’re seeing a radical shift in how digital interfaces feel, move, and interact with the environment.

At Honter Studio, we believe this marks the beginning of a new visual era and we’re ready to help brands translate this into real, functional design.






Why It Matters for Designers

This isn’t just a visual upgrade. Apple is re-engineering how people experience digital products:

  • Hierarchy through depth: UI elements are layered, not stacked. Focus is created with motion, blur, and light not hard shadows.

  • Environmental awareness: In AR or Vision Pro, UI now reacts to lighting conditions and movement in physical space.

  • Designing with restraint: Liquid Glass removes distractions. It demands elegance, balance, and precision.






Designing for Liquid Glass: Core Principles

Principle

What It Means for Design

Translucency

Use depth blur and layered panels instead of solid containers

Light & Color

Prioritize subtle gradients and glow over flat colors

Motion

Use micro-interactions to reinforce hierarchy and flow

Responsiveness

Interfaces must adapt fluidly not just responsively to context and input

Apple’s system apps (Weather, Music, Settings) are already demonstrating these principles. But most third-party apps haven’t caught up, yet.






How Honter Studio Interprets Liquid Glass

We don’t just copy trends. We translate them into meaningful experiences.

At Honter Studio, our process looks like this:

  • UI Redesigns: For existing apps that want to evolve with the trend without alienating current users.

  • From-Scratch Interfaces: For startups launching in 2025–2026, we build for the Liquid Glass world from the ground up.

  • Design Systems: We help teams build flexible component libraries that respect Apple’s Human Interface Guidelines while staying brand-authentic.

We’ve already begun prototyping apps that combine tactile feedbackglass-layer motion, and visionOS dynamic light adaptation. If your app is stuck in flatland, now’s the time to evolve.

Ready to apply this to your app or website? Here’s how we implement Liquid Glass step-by-step →






Is Liquid Glass Just a Trend?

Maybe. But so was flat design, and it shaped a decade.

Liquid Glass may evolve or fade but its underlying principles (depth, elegance, motion) will stick. At worst, it’s a highly marketable aesthetic. At best, it’s a leap forward in human-centered digital design.

Either way: brands that lead with innovation win.






Curious how startups and small businesses can actually use Liquid Glass in their products? Read our guide for startups →

Advanced Techniques with Liquid Glass

Layer multiple glass elements for depth. Combine with bold colors underneath for visual impact. Use motion to draw attention to glass elements. Pair with clean typography and generous spacing. Advanced uses create sophisticated, premium interfaces.

Trending Variations in 2025

Colored glass (tinted rather than pure frosted). Animated glass transitions. Gradient glass backgrounds. Each is a variation on the core trend. Study what's being used in the latest iOS updates, Figma interfaces, and design-forward apps.

Browser and Device Compatibility

Glass effects work in modern browsers (Chrome, Firefox, Safari, Edge). Older browsers don't support blur effects well. Mobile performance varies—iOS handles glass better than Android. Test across devices. Provide fallbacks for unsupported browsers.

CSS Implementation Guide

backdrop-filter: blur() creates the frosted effect. background: rgba() with opacity creates the color. border-radius: creates rounded corners. Combining these creates glass morphism. Use PostCSS for cross-browser support.

Design System for Glass

Create a library of glass components: glass cards, glass buttons, glass overlays. Define blur strength (10px, 20px, 30px). Define opacity (0.1, 0.2, 0.3). This system ensures consistency across your interface.

Animations with Glass

Fade-in animations look good. Slide-in animations look good. Blur animations (gradually increasing blur) are subtle and sophisticated. Keep animations under 300ms—glass doesn't need flashy movement.

Iterating on Glass Designs

Your first glass design might not be perfect. Test it with users. Does the blur amount work? Is text readable? Does it feel premium or gimmicky? Adjust based on feedback. Glass morphism is a technique, not a guarantee of good design.

The best glass designs are subtle. Overuse of glass looks cheap and confusing. Use glass strategically for key elements (modals, navigation, CTAs), not everywhere.

Apple's new Liquid Glass UI showing translucent widgets for Music and Reminders overlaid on a photo background, with redesigned app icons and a bold header that reads ‘A whole new element of delight.

Final Thoughts

We’re entering a new design cycle. If your product still looks like it was built in 2018, users will feel it, even if they can’t articulate why.

Want your brand to feel like the future?
Let’s build with Liquid Glass, intentionally, beautifully, and strategically.

Let’s Talk

Book a free consultation →
View our design portfolio →