Getting Readability on Apple’s Liquid Glass

Of us have lots to say about “liquid glass,” the design aesthetic that Apple launched at WWDC 2025. Some find it irresistible, some hate it, and others jumped straight into seeing learn how to they might create it in CSS.

There’s lots to like, hate, and expertise with liquid glass. You possibly can love the best way content material displays in opposition to backgrounds. You possibly can hate the poor distinction between foreground and background. And you’ll be desirous to work with it. All of these could be true on the similar time.

I, for one, am typically impartial with issues like this for that precise cause. I’m intrigued by liquid glass, however maintain some concern about legibility, notably as somebody who already struggles with the legibility of Apple’s current design system (notably in Management Middle). And I really like wanting on the many and intelligent methods that devs have tried to duplicate liquid glass in their very own experiments.

So, I’m within the strategy of gathering notes on the subject as I wrap my head round this “new” (or not-so-new, relying on who’s speaking) factor and work out the place it suits in my very own work. These hyperlinks are a selection choice of posts that I’ve discovered useful and positively not meant to be an exhaustive listing of what’s on the market.

WWDC Introduction

At all times a good suggestion to begin with info straight from the horse’s mouth.

In brief:

• It’s the primary design system that’s universally utilized to all of Apple’s platforms, versus a single platform like Apple’s final main overhaul, iOS 7.
• It’s designed to refract gentle and dynamically react to consumer interactions.
• By “dynamic” we’re referring to UI components updating into others because the context modifications, equivalent to displaying extra controls. This sounds lots just like the Dynamic Island, supporting shape-shifting animations.
• There’s a give attention to liberating up area by eradicating exhausting rectangular edges, permitting UI components to change into a part of the content material and reply to context.

Apple additionally launched a extra in-depth video geared toward introducing liquid glass to designers and builders.

In brief:

• Liquid glass is an evolution of the “aqua” blue interface from macOS 10, the real-time launched in iOS 7, the “fluidity” of iOS 10, the flexibleness of the Dynamic Island, and the immersive interface of visionOS.
• It’s a “digital meta-material” that dynamically bends and shapes gentle whereas shifting fluidly like water.
• It’s a minimum of partially a response to {hardware} units adopting deeper rounded corners.
• Lensing: Background components are bended and warped relatively than scattering gentle because it’s been in earlier designs. There’s gel-like really feel to components.
• Translucence helps reveal what’s beneath a management, equivalent to a progress indicator you possibly can scrub extra exactly by seeing what’s behind the floor.
• Controls are persistent between views for establishing a relationship between controls and states. This jogs my memory of the View Transition API.
• Components routinely adapt to gentle and darkish modes.
• Liquid glass consists of layers: spotlight (gentle casting and motion), shadow (added depth for separation between foreground and background), and illumination (the versatile properties of the fabric).
• It isn’t meant for use in every single place however is simplest for the navigation layer. And keep away from utilizing glass on glass.
• There are two variants: common (most versatile) and clear (doesn’t have adaptive behaviors for permitting content material to be extra seen under the floor).
• Glass could be tinted totally different colours.

Documentation

Proper on cue, Apple has already made numerous developer sources accessible for utilizing and implementing liquid glass which are helpful references.

‘Lovely’ and ‘Exhausting to Learn’: Designers React to Apple’s Liquid Glass Replace

This Wired piece is a pleasant normal overview of what liquid glass is and context about the way it was launched at WWDC 2025. I like getting a tackle this from a normal tech perspective versus, say, somebody’s fast sizzling take. It’s a useful pulse on what’s occurring from a excessive stage and not using a bunch of hyperbole, setting the stage for digging deeper into issues.

In brief:

• Apple is asking this “Liquid Glass.”
• It’s Apple’s first vital UI overhaul in 10 years.
• It is going to be applied throughout all of Apple’s platforms, together with iOS, macOS, iPadOS, and even the Imaginative and prescient Professional headset from which it was impressed.
• “From a technical perspective, it’s a really spectacular impact. I applaud the effort and time it should have taken to imitate refraction and dispersion of sunshine to such a excessive diploma.”
• “Just like the primary beta for iOS 7, what we’ve seen up to now is tough on the perimeters and doubtlessly veers into distracting or difficult to learn, particularly for customers with visible impairments.”

Accessibility

Let’s get proper to the center of the place the pushback in opposition to liquid glass is coming from. Whereas the aesthetic, function, and rules of liquid glass are broadly applauded, many are involved in regards to the legibility of content material in opposition to a glass floor.

Historically, we fill backgrounds with strong or opaque strong coloration to ascertain distinction between the foreground and background, however with refracted gentle, coloration performs much less a task and it’s doable that highlighting or dimming a light-weight supply is not going to produce sufficient distinction, notably for these with low-vision. WCAG 2.2 emphasizes coloration and font dimension for enhancing distinction and does present steerage for one thing that’s amorphous like liquid glass the place bending the content material under it’s what establishes distinction.

“Apple’s “Liquid Glass” and What It Means for Accessibility”:

• “When you may have translucent components letting background colours bleed by way of, you’re creating variable distinction ratios that may work properly over one background, however fail over a brilliant photograph of the sundown.”
• “Apple turned the iPhone’s notch into the Dynamic Island, Android telephones that don’t have notches began making pretend notches, simply so they might have a Dynamic Island too. That’s affect. However right here they’re making what appears to be like like a purely aesthetic choice with out addressing the accessibility implications.”
• “Folks with dyslexia, who already wrestle with busy backgrounds and low-contrast textual content, now take care of an interface the place visible noise is baked into the design language. Folks with consideration issues could have their focus tousled once they see a number of translucent layers creating an entire lot of visible noise.”
• “It’s like having a grand entrance and a facet door marked ‘accessible.’ Technically compliant. However lacking the purpose.”
• “The authorized panorama provides one other layer. There’s 1000’s of digital accessibility lawsuits filed within the U.S. yearly for violating the ADA, or the American Disabilities Act. Corporations are paying tens of millions in settlements. However that is Apple. They’ve tens of millions. Plus all of the sources on this planet to save lots of them from authorized dangers. However their affect means they’re setting precedents.”

“Liquid Glass: Apple vs accessibility”:

• “But even in Apple’s press launch, linked earlier, there are a number of screenshots the place key interface parts are, at greatest, very tough to learn. That’s the new foundational level for Apple design. And people screenshots may have been designed to point out the perfect of issues.”
• “Apple continues to be fairly often reactive relatively than proactive relating to imaginative and prescient accessibility. Even as we speak, there are main issues with the earlier variations of its working programs (one instance being the vestibular set off in the event you tap-hold the Focus button in Management Centre). One yr on, they aren’t mounted.”
• “State, accurately, that Apple is a pacesetter in accessibility. However cease assuming that simply because this new design could be OK for you and since Apple has controls in place that may assist individuals keep away from the worst results of design modifications, every little thing is simply peachy. As a result of it isn’t.”

“Liquid Glass” by Hardik Pandya

• “The impact is technically spectacular, but it surely introduces a layer of visible processing between you and your recollections. What was as soon as rapid now feels mediated. What was as soon as direct now feels filtered.”
• “Whereas Apple’s rationale for Liquid Glass facilities on ‘seeing’ content material by way of a refractive floor, consumer interface controls will not be meant to be seen—they’re meant to be operated. If you faucet a button, slide a slider, or toggle a change, you aren’t observing these components. You’re manipulating them immediately.”
• “Buttons change into amorphous shapes. Sliders lose their mechanical readability. Toggle switches abandon their bodily affordances. They seem as summary varieties floating behind glass—lovely maybe, however disconnected from the basic function of interface controls: to ask and reply to direct manipulation.”
• “Essentially the most forward-thinking interface design as we speak focuses on invisibility – making the interplay so seamless that the interface itself disappears. Liquid Glass makes the interface extra seen, extra current, and extra demanding of consideration.”

“Liquid glass, now with frosted ideas”:

• It’s simple to dump on liquid glass in its introductory type, but it surely’s price remembering that it’s in beta and that Apple is actively creating it forward of its formal launch.
• Loads has modified between the Beta 2 and Beta 3 releases. The opacity between glass and content material has been bumped up in a number of key areas.

Tutorials, Mills, and Frameworks

It’s enjoyable to see the distinction approaches many people have used to re-create the liquid glass impact in these early days. It amazes me that there’s already a deluge of tutorials, turbines, and even UI frameworks after we’re solely a month previous the WWDC 2025 introduction.

Experiments

Let’s drop in a number of fascinating demos that people have created. To be clear, glass-based interfaces will not be new and have been lots explored, which you could find over at CodePen in abundance. These are latest experiments. The commonest approaches seem to succeed in for SVG filters and background blurs, although there are numerous programmatic demos as properly.

Utilizing a CSS-only method with an SVG filter with backdrop-filter with a collection of nested containers that sorta mimics how Apple describes glass as being composed of three layers (spotlight, shadow and illumination):

Identical form of deal right here, however within the context of a theme toggle change that demonstrates how glass could be tinted:

Evaluating a straight-up CSS blur with an SVG backdrop:

Contextual instance of a slider element:

Utilizing WebGL:

Assorted hyperlinks and protection

A number of extra hyperlinks from this browser tab group I’ve open: