Getting Clarity on Apple's Liquid Glass
Getting Clarity on Apple's Liquid Glass ź“ė Ø
Folks have a lot to say about āliquid glass,ā the design aesthetic that Apple introduced at WWDC 2025. Some love it, some hate it, and others jumped straight into seeing how to they could create it in CSS.
Thereās a lot to love, hate, and experience with liquid glass. You can love the way content reflects against backgrounds. You can hate the poor contrast between foreground and background. And you can be eager to work with it. All of those can be true at the same time.
I, for one, am generally neutral with things like this for that exact reason. Iām intrigued by liquid glass, but hold some concern about legibility, particularly as someone who already struggles with the legibility of Appleās existing design system (notably in Control Center). And I love looking at the many and clever ways that devs have tried to replicate liquid glass in their own experiments.
So, Iām in the process of gathering notes on the topic as I wrap my head around this ānewā (or not-so-new, depending on whoās talking) thing and figure out where it fits in my own work. These links are a choice selection of posts that Iāve found helpful and definitely not meant to be an exhaustive list of whatās out there.
WWDC Introduction
Always a good idea to start with information straight from the horseās mouth.
In short:
- Itās the first design system that is universally applied to all of Appleās platforms, as opposed to a single platform like Appleās last major overhaul, iOS 7.
- Itās designed to refract light and dynamically react to user interactions.
- By ādynamicā weāre referring to UI elements updating into others as the context changes, such as displaying additional controls. This sounds a lot like the Dynamic Island, supporting shape-shifting animations.
- Thereās a focus on freeing up space by removing hard rectangular edges, allowing UI elements to become part of the content and respond to context.
Apple also released a more in-depth video aimed at introducing liquid glass to designers and developers.
In short:
- Liquid glass is an evolution of the āaquaā blue interface from macOS 10, the real-time introduced in iOS 7, the āfluidityā of iOS 10, the flexibility of the Dynamic Island, and the immersive interface of visionOS.
- Itās a ādigital meta-materialā that dynamically bends and shapes light while moving fluidly like water.
- Itās at least partially a response to hardware devices adopting deeper rounded corners.
- Lensing: Background elements are bended and warped rather than scattering light as itās been in previous designs. Thereās gel-like feel to elements.
- Translucence helps reveal what is underneath a control, such as a progress indicator you can scrub more precisely by seeing what is behind the surface.
- Controls are persistent between views for establishing a relationship between controls and states. This reminds me of the View Transition API.
- Elements automatically adapt to light and dark modes.
- Liquid glass is composed of layers: highlight (light casting and movement), shadow (added depth for separation between foreground and background), and illumination (the flexible properties of the material).
- It is not meant to be used everywhere but is most effective for the navigation layer. And avoid using glass on glass.
- There are two variants: regular (most versatile) and clear (does not have adaptive behaviors for allowing content to be more visible below the surface).
- Glass can be tinted different colors.
Documentation
Right on cue, Apple has already made a number of developer resources available for using and implementing liquid glass that are handy references.
āBeautifulā and āHard to Readā: Designers React to Appleās Liquid Glass Update
This Wired piece is a nice general overview of what liquid glass is and context about how it was introduced at WWDC 2025. I like getting a take on this from a general tech perspective as opposed to, say, someoneās quick hot take. Itās a helpful pulse on whatās happening from a high level without a bunch of hyperbole, setting the stage for digging deeper into things.
In short:
- Apple is calling this āLiquid Glass.ā
- Itās Appleās first significant UI overhaul in 10 years.
- It will be implemented across all of Appleās platforms, including iOS, macOS, iPadOS, and even the Vision Pro headset from which it was inspired.
- āFrom a technical perspective, itās a very impressive effect. I applaud the time and effort it must have taken to mimic refraction and dispersion of light to such a high degree.ā
- āSimilar to the first beta for iOS 7, what weāve seen so far is rough on the edges and potentially veers into distracting or challenging to read, especially for users with visual impairments.ā
Accessibility
Letās get right to the heart of where the pushback against liquid glass is coming from. While the aesthetic, purpose, and principles of liquid glass are broadly applauded, many are concerned about the legibility of content against a glass surface.
Traditionally, we fill backgrounds with solid or opaque solid color to establish contrast between the foreground and background, but with refracted light, color plays less a role and itās possible that highlighting or dimming a light source will not produce enough contrast, particularly for those with low-vision. WCAG 2.2 emphasizes color and font size for improving contrast and does provide guidance for something thatās amorphous like liquid glass where bending the content below it is what establishes contrast.
- āWhen you have translucent elements letting background colors bleed through, youāre creating variable contrast ratios that might work well over one background, but fail over a bright photo of the sunset.ā
- āApple turned the iPhoneās notch into the Dynamic Island, Android phones that donāt have notches started making fake notches, just so they could have a Dynamic Island too. Thatās influence. But here they are making what looks like a purely aesthetic decision without addressing the accessibility implications.ā
- āPeople with dyslexia, who already struggle with busy backgrounds and low-contrast text, now deal with an interface where visual noise is baked into the design language. People with attention disorders may have their focus messed up when they see multiple translucent layers creating a whole lot of visual noise.ā
- āItās like having a grand entrance and a side door marked āaccessible.ā Technically compliant. But missing the point.ā
- āThe legal landscape adds another layer. Thereās thousands of digital accessibility lawsuits filed in the U.S. yearly for violating the ADA, or the American Disabilities Act. Companies are paying millions in settlements. But this is Apple. They have millions. Plus all the resources in the world to save them from legal risks. But their influence means theyāre setting precedents.ā
- āYet even in Appleās press release, linked earlier, there are multiple screenshots where key interface components are, at best, very difficult to read. That is the new foundational point for Apple design. And those screenshots will have been designed to show the best of things.ā
- āApple is still very often reactive rather than proactive regarding vision accessibility. Even today, there are major problems with the previous versions of its operating systems (one example being the vestibular trigger if you tap-hold the Focus button in Control Centre). One year on, they arenāt fixed.ā
- āState, correctly, that Apple is a leader in accessibility. But stop assuming that just because this new design might be OK for you and because Apple has controls in place that might help people avoid the worst effects of design changes, everything is just peachy. Because it isnāt.ā
- āThe effect is technically impressive, but it introduces a layer of visual processing between you and your memories. What was once immediate now feels mediated. What was once direct now feels filtered.ā
- āWhile Appleās rationale for Liquid Glass centers on āseeingā content through a refractive surface, user interface controls are not meant to be seenāthey are meant to be operated. When you tap a button, slide a slider, or toggle a switch, you are not observing these elements. You are manipulating them directly.ā
- āButtons become amorphous shapes. Sliders lose their mechanical clarity. Toggle switches abandon their physical affordances. They appear as abstract forms floating behind glassābeautiful perhaps, but disconnected from the fundamental purpose of interface controls: to invite and respond to direct manipulation.ā
- āThe most forward-thinking interface design today focuses on invisibility ā making the interaction so seamless that the interface itself disappears. Liquid Glass makes the interface more visible, more present, and more demanding of attention.ā
- Itās easy to dump on liquid glass in its introductory form, but itās worth remembering that itās in beta and that Apple is actively developing it ahead of its formal release.
- A lot has changed between the Beta 2 and Beta 3 releases. The opacity between glass and content has been bumped up in several key areas.
Tutorials, Generators, and Frameworks
Itās fun to see the difference approaches many folks have used to re-create the liquid glass effect in these early days. It amazes me that there is already a deluge of tutorials, generators, and even UI frameworks when weāre only a month past the WWDC 2025 introduction.
- Create this trendy blurry glass effect with CSS (Kevin Powell)
- Liquid Glass design using CSS (Nordcraft)
- Adopting Appleās Liquid Glass: Examples and best practices (LogRocket)
- Liquid Glass Figma File
- CSS Liquid Glass Effects (DesignFast)
- Liquid Glass UI Framework
- Liquid Glass CSS Generator
Experiments
Letās drop in a few interesting demos that folks have created. To be clear, glass-based interfaces are not new and have been plenty explored, which you can find over at CodePen in abundance. These are recent experiments. The most common approaches appear to reach for SVG filters and background blurs, though there are many programmatic demos as well.
Using a CSS-only approach with an SVG filter with backdrop-filter with a series of nested containers that sorta mimics how Apple describes glass as being composed of three layers (highlight, shadow and illumination):
Same sort of deal here, but in the context of a theme toggle switch that demonstrates how glass can be tinted:
Comparing a straight-up CSS blur with an SVG backdrop:
Contextual example of a slider component:
Using WebGL:
Assorted links and coverage
A few more links from this browser tab group I have open:
