# Analyzing Liquid Glass

> Apple unveiled Liquid Glass, a new design language, at WWDC2025. It looks like glass, but the idea is that it has fluidity like a liquid. It is a good concept, but it seems the implementation is not quite there yet. Since this is the first developer beta, it would be good to wait a bit longer.

<Apple> unveiled Liquid Glass, a new design language, at WWDC2025. It looks like glass, but the idea is that it has fluidity like a liquid. It is a good concept, but it seems the implementation is not quite there yet. Since this is the first developer beta, it would be good to wait a bit longer.

## Appearance

If you only look at static screens, it resembles the Aqua UI introduced in <2000>. However, whereas Aqua had a hard, candy-like feel (despite the name meaning "water/aqua"), Liquid Glass feels soft, springy, and fluid like an actual droplet of water. Unlike Aqua UI, what also stands out is that Liquid Glass implements effects such as the refraction of light through a droplet lens in a very realistic way.

But in the context of analyzing a <user interface>, discussing what it looks like on the surface is secondary. It is better to examine what intentions or planning led to this design language, whether that planning is appropriate, and whether it has been implemented well in accordance with the plan.

## Logic

Among the materials I saw, one of the WWDC2025 sessions, "[Meet Liquid Glass](https://developer.apple.com/videos/play/wwdc2025/219/)," gave the most detailed explanation of the design intent behind the new design language.

### Blurring the Boundary Between Hardware and Software

These days, hardware displays have curved corners. If UI elements are rounded like droplets, then as in the image below, it becomes possible to elegantly express 1) the corners of the device, 2) the corners of the display panel, and 3) the corners of the software UI region all as concentric shapes.

![Rounded physical display.png](https://wiki.g15e.com/data/Rounded%20physical%20display.webp)

However, in Developer Beta 1, there are many cases where the curves of nested elements are not concentric, which severely hurts the aesthetics. Presumably this is because it still has not been fully polished.

### Making Boundaries Intuitively Recognizable Without Completely Obscuring Content

Because glass or droplets are transparent, they do not completely cover the content, while effects such as the refraction of light make it visually easy to recognize that there is liquid over the content. The lens effect of liquid is common in the real world, so it is familiar to everyone. Accordingly, it serves as an instinctive visual cue that anyone can understand.

In particular, because the refraction of light that occurs at the edge of a droplet lens acts as a kind of border, it naturally makes background and foreground easy to distinguish. That said, while there are backgrounds on which the border is drawn beautifully as in the image below, there is also the problem that on some backgrounds the border looks very ugly. For example, if you place a Liquid Glass element on a solid black background, it does not look pretty.

![Natural border by refraction.png](https://wiki.g15e.com/data/Natural%20border%20by%20refraction.webp)

### Responding Naturally to Interaction

During interaction, a Liquid Glass element can "float up" toward the user's face. (The fact that when touched it does not get pressed down but instead comes closer toward the finger is similar to Google's <Material Design>. The initial metaphor of Material Design was "magical paper.")

![Lifted element in Liquid Glass.png](https://wiki.g15e.com/data/Lifted%20element%20in%20Liquid%20Glass.webp)

Moreover, because it is transparent, it enables more precise manipulation, as in the progress bar example above.

However, because the refraction of light at the border has been implemented in an excessively realistic way, it can distract the user and draw their [attention](https://wiki.g15e.com/pages/Attention.txt) away from the task. This is especially problematic when selecting text on a touch screen as shown below. The ink distortion effect around the droplet is attracting too much attention.

![text-selection-on-liquid-glass.webp](https://wiki.g15e.com/data/text-selection-on-liquid-glass.webp "obsidian-width:300")

### Natural Transformation According to Context

When screens transition, navigation elements or floating elements often change according to context. In situations like that, Liquid Glass elements can naturally transform their shape. This makes it possible to express the idea that, rather than there being a separate control panel for each screen, a single control panel changes organically to suit the context. The effect where clicking a hamburger button smoothly turns the button into a menu can also be expressed in the same way.

The image below shows the transition process in which new controls softly appear as the screen moves. It is the moment when one Liquid Glass element splits into two elements.

![Fluid change between screens.png](https://wiki.g15e.com/data/Fluid%20change%20between%20screens.webp)

### Accessibility and Usability

A Liquid Glass element is composed of several layers, and each layer changes dynamically according to context. The layers mentioned in the video above are as follows. ("Glowing layer" was not explicitly given a name, so I named it arbitrarily. For the other layer names, I use the names mentioned in the video as they are.)

- **Highlight layer**: A layer that expresses the refraction effect at the edge of a droplet lens. Its function is to naturally reveal the border of a Liquid Glass element.
- **Shadow layer**: A shadow layer whose opacity is automatically adjusted depending on what content is under the Liquid Glass element. If it is placed over text, the shadow becomes darker; if it is placed over a clean background, the shadow becomes lighter. Its function is to make the Liquid Glass element appropriately noticeable in any context.
- **Glowing layer**: A layer that emits light from the Liquid Glass element itself when it is clicked or touched. Similar to Google's <Material Design>, it implements an effect where light spreads outward centered on the point the user touched. Its function is to provide immediate feedback for interaction.
- **Dimming layer**: A layer that adaptively changes to white or black depending on the background on which the Liquid Glass element is placed. Depending on the color of this layer, the color of the symbol placed on the glass is also inverted (black if it is white, white if it is black). Its function is to improve the visibility of the Liquid Glass element.

In addition, each layer automatically adapts to various accessibility requirements such as high-contrast mode and reduced motion.

![Layers of Liquid Glass.png](https://wiki.g15e.com/data/Layers%20of%20Liquid%20Glass.webp)

However, in Developer Beta 1, the color switching of the Dimming Layer is implemented somewhat crudely, so the Liquid Glass element gives a distracting impression by flickering unnecessarily often. Below is an example from Safari. The moment the Dimming Layer changes to white, it changes with a "flash" and pulls the gaze toward it. Flicker is treated as motion and affects <eye-movement planning>. If flicker is detected in peripheral vision, it forcibly draws the eyes toward it.

![blinking-dimming-layer-of-liquid-glass.webp](https://wiki.g15e.com/data/blinking-dimming-layer-of-liquid-glass.webp)

## When Should It Be Used?

The video above says that Liquid Glass elements should not be applied everywhere. It says they are best used in the navigation layer, and advises avoiding situations where glass overlaps on top of glass.

## Is This the Return of Skeuomorphism?

Some criticize the Liquid Glass design as the return of [skeuomorphism](https://wiki.g15e.com/pages/Skeuomorphism.txt), but I think the following points need to be considered.

- What were the advantages and disadvantages of skeuomorphism?
- Why did Apple abandon skeuomorphism in iOS 7, announced in 2013?
- Which aspects of Liquid Glass correspond to the disadvantages of skeuomorphism?

One advantage of skeuomorphism is that, because it uses objects from the real world as metaphors, it is relatively familiar. Familiarity means it is easy to learn, and that is an important axis of usability. (Another important axis is "ease of use.")

One disadvantage of skeuomorphism is that if you want to make a skeuomorphic design "flexible," it takes a lot of work. The easiest way to adapt a skeuomorphic design to devices of various forms is nine-patch (a method of dividing a design into a 3-by-3 grid, fixing the four corners, and allowing the center block and the four sides to stretch variably), but this method not only takes a lot of work, it also has many expressive limitations because the center block and the four sides must somehow be made variable as well (they have to be tileable or stretchable).

I think this drawback was one of the major factors that led even Apple to shift from skeuomorphism to flat design in 2013. The form factors of the iPhone and iPad had become too varied to sustain it any longer. By contrast, because flat design is centered on geometric elements, it can easily adapt to various form factors. That is probably also why platforms that had to support diverse form factors adopted flat design relatively earlier, in the mid-2000s.

Another disadvantage is that it often imitates real-world objects too literally without any functional advantage at all (or even despite having functional disadvantages).

That said, there are also cases where people criticize something as skeuomorphism merely because it has some resemblance to a real-world object, and that is mistaken. Shadows are a representative example. In iOS 7, perhaps because it tried too hard to get away from skeuomorphism, even shadows were removed, and as a result usability also declined. This contrasts with how strongly Google's <Material Design> emphasized the role of shadows in 2014. Since shadows have clear functional benefits, making appropriate use of shadows in UI elements has nothing to do with skeuomorphism. The human eye and brain have specialized adaptive mechanisms for extracting useful information from shadows, such as information from light and dark or texture.

So it is worth thinking about whether Liquid Glass, while imitating real-world substances like glass or water droplets, takes the advantages of skeuomorphism while discarding its disadvantages, and at the same time whether it has as much flexibility as flat design.

- I think it was a good choice to borrow the function of a "border" by imitating the phenomenon of strong light refraction at the edge of a droplet lens. However, reproducing the refraction of light too literally and making the eyes restless seems to repeat one of the mistakes of old skeuomorphism.
- Unlike past skeuomorphic design, which implemented real-world objects as "bitmap" images, the fact that this is rendered in real time means that, unlike the past, it can adapt flexibly to diverse form factors, which is an advantage.
- As for the other various problems, they seem to be matters of execution rather than planning. I hope it will be considerably polished by the time the official version comes out.