Glass Is Not a Style
How surfaces, depth, and real-world instincts help an interface make sense
Every argument about flat design versus making things look real missed the actual question. The question is not how realistic an interface should look. It is how much of your everyday sense of space it borrows. People are amazing at reading stacked, layered space. Refusing to use that is not restraint. It is throwing away free brainpower.
Apple's spatial guidance makes the practical case plainly. In visionOS, glass surfaces let digital content sit in a real room without hiding it, and they make layers read as layers. The blur is not decoration. It is how the system shows you what is in front of what, in a place where drop shadows mean nothing because there is no page.
Materials provide visual separation between content and its surroundings, and adapt to the environment so people stay oriented.
What a surface tells you
- Layer. Something see-through is sitting on top of something else. Think of frosted bathroom glass. You can see enough of what is behind it to know you have not left. That is why a thin sheet feels temporary and a solid page feels like a place you arrived.
- Focus. Blur is attention you can see. Softening the background is the most direct way to say the important thing is here, without shouting or fading everything to black.
- Continuity. If the surface actually samples the content behind it, moving it changes what you see through it. Like a rainy window: you know the street is still there. That link is what makes it feel like a real object, not a grey rectangle.
| What you tune | What it means | Reads as |
|---|---|---|
| Blur amount | Gap between two layers | How far back the content sits |
| See-through | Whether you have left the page | A quick sheet vs a place |
| Hairline border | The edge of the surface | A real object, not fog |
| Shadow | Height under one light | How high the layer floats |
Translucency is information, not decoration
A see-through surface tells you two specific things at once. It says this layer is temporary, and it shows you what it is covering. Both are facts the user needs, and neither survives being flattened into a solid opaque panel.
The temporary part sets expectation. When a sheet slides up and you can still see your list softened behind it, you know your place is held. Dismiss the sheet and you drop straight back where you were. An opaque panel breaks that thread. It looks like a fresh page, so people brace for having navigated somewhere new. Translucency is a quiet promise that you have not actually left.
The covering part is orientation. A menu that lets a little of the page bleed through is telling you what it will hand you back to when you close it. That is the difference between a frosted bathroom door, where you know the room is still on the other side, and a solid wall, which could be hiding anything at all.
This is why glass turns load-bearing in spatial computing. On a phone the screen edge does most of the work. A panel reads as in front because it touches the frame and drops a shadow onto the page behind it. In a headset there is no page and no edge. Content floats in your real living room, and a drop shadow means nothing against a sofa. Translucency, and the way light passes through it, becomes the only dependable cue for what sits in front of what. Apple leans on glass in visionOS for that reason, not for the look of it.
You can watch this working on any phone. Pull down the control panel and the app underneath stays faintly visible through it, softened but present. That blur is doing a job. It tells you the panel is a passing overlay, not a new screen, so you swipe it away without a second thought and land exactly where you were. Swap that same panel for a solid sheet and people hesitate, because a solid sheet reads as a place you travelled to rather than a curtain you pulled across. The material is carrying the meaning, not the animation.
The mistake everyone makes
Putting glass on everything. The moment every surface is see-through, nothing looks layered. Layering is a relationship, and relationships need contrast. A page where the nav, the cards, the pop-ups, and the buttons are all frosted has no order at all. It just has a texture.
My rule: glass is for things that float or come and go. Navigation that hovers over content, sheets, pop-ups, controls that follow you. Content itself sits on solid ground, because content is the thing you are meant to trust and read.
- Slapped on every surface at once
- Same blur on nav, cards, pop-ups and buttons
- Fixed tint that ignores what is behind
- Fails against a busy background
- Animates the blur and drops frames
- Saved for floating, passing things
- Content kept on solid ground
- Tint raised until body text passes 4.5:1
- One height scale, one light source
- Given its own layer so it stays smooth
Most glass on the web is just decoration
I have to be honest about my own field here. Almost all of the glass you see on the web fails the test I just set out. It is a fixed frosted panel with a pretty tint that never samples anything real, parked over a static gradient. It carries no information about layers, because there is only ever one layer. It is a texture wearing the costume of a material.
The look picked up a name around 2020, glassmorphism, and the name is most of what actually spread. The tell for whether a given surface earns its keep is simple. Move it, or move the content behind it, and watch. If nothing changes through the glass, it was decoration all along. A real material updates as the world behind it moves, the way a rain-streaked window keeps showing you the street shifting past.
Depth on a flat screen
On a flat screen you have four honest tools for depth. It is worth knowing what each one really means, instead of reaching for a shadow every time.
- 01Overlap. One thing covering another is the strongest, oldest depth cue we have. It costs nothing and it never lies.
- 02Blur. Like a camera focusing. It uses the same machinery as your eye, which is why it feels real and not just drawn.
- 03Motion parallax. Things at different depths move at different speeds as you scroll. Very convincing in small doses. Past about twenty percent difference it makes people queasy.
- 04Shadow. The weakest and most abused cue. A shadow says there is one light. If your shadows disagree about where that light is, the interface looks sloppy, even to people who cannot say why.
:root {
/* Light comes from above and slightly front. Never varies. */
--shadow-color: 220 40% 4%;
--elevation-1: 0 1px 2px hsl(var(--shadow-color) / 0.06);
--elevation-2: 0 4px 12px hsl(var(--shadow-color) / 0.08);
--elevation-3: 0 12px 32px hsl(var(--shadow-color) / 0.12);
}
.surface-floating {
background: color-mix(in oklab, var(--color-card) 72%, transparent);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid color-mix(in oklab, currentColor 8%, transparent);
box-shadow: var(--elevation-2);
}
@supports not (backdrop-filter: blur(1px)) {
/* The fallback is opaque, not transparent. Never sacrifice legibility. */
.surface-floating { background: var(--color-card); }
}The speed cost nobody mentions
See-through surfaces are expensive to draw. Each one makes the browser sample and reprocess the area behind it every frame it changes. Stack three, animate them, and even a fast laptop drops below sixty frames per second. That cost is the real limit on how much glass you use. And it quietly enforces good design: glass becomes scarce, so it stays meaningful.
The mechanism is worth understanding, because it tells you where the cost hides. To draw a see-through surface the browser copies the pixels already painted behind it, then runs a blur over that copy. A blur is an averaging pass: every output pixel reads a patch of its neighbours. Widen the blur radius and that patch grows in two directions at once, so a 40 pixel blur is not twice the work of a 20 pixel blur, it is closer to four times. Add the saturation boost and it happens again, on every frame the backdrop changes.
In practice that means putting each see-through surface on its own compositing layer, never animating the blur amount itself, and instead fading a surface that is already blurred.
Where this is heading
Interfaces are moving into places the designer does not control. A headset in someone's living room. A car in changing light. A screen sitting behind whatever content is there. In those places fixed colours stop being reliable. A surface that reacts to its surroundings is the only thing that stays readable. We are heading toward interfaces judged by how they behave in changing light, not by their hex codes. That is much closer to how industrial designers have always worked.