One material. Your light.
Every control here starts as Apple draws it, fitted to the pixel. A look changes what the light does on top: the tint, the coloured edge, the corners, the pace. Set it once and every glass element follows.
Southern California, the 1960s. Larry Bell coated glass cubes until their edges held colour. Robert Irwin hung discs that dissolved into the wall. James Turrell cut openings into ceilings and let the sky in.
Clean lines, circles and rectangles, and a person standing in the light. Calm, with colour turned all the way up. It is the first look we built.
<html data-ag-look="light-space">
Blur is not glass.
Most "glass" on the web is a blurred rectangle. Real glass has thickness. Light meets the curved rim, bends, and carries the background with it. Watch the stripes at the edges.
backdrop-filter: blur(14px)A frosted rectangle. Flat edges, no depth.<ag-glass>A slab with a curved rim. The edge bends what is behind it.Light bends at the edge.
For every pixel we take the slope of the rim, bend the view ray with Snell's law, and store how far it moved. Chromium runs that map as a filter on whatever is behind the element. Three passes with slightly different strength, one per colour, give the thin rainbow at the rim. Take one apart.
These are the real components. The sliders drive the same parameters you get in code.
We checked our work against Apple's.
A small SwiftUI app draws Apple's .glassEffect over the same pictures, at the same sizes. We screenshot both, compare every pixel, and let a search nudge our parameters until the difference stops shrinking. Drag the line.
Mean absolute error per colour channel, 0 to 255 scale, over each glass shape plus a 10 px margin, two scenes, macOS 27. The biggest surprise: Apple's Clear glass is frosted, about 16 px of blur. We had it at 1.6.
Controls that notice you.
At rest a knob is solid. Hold it and it becomes a lens. Menus grow out of their buttons. A selection stretches on its way to your finger. Touch everything.
Looks right in an actual app.
Scroll the feed and the tab bar shrinks to get out of the way. Drag across it and the selection follows as a lens. Tap an album and a sheet floats up, inset so the content peeks around it. Pull it up and it goes flush and more opaque.
Corners are concentric. The sheet sits 8 px inside a 55 px device corner, so its corner is 47 px.
Two drops, one glass.
Bring glass shapes close and they melt into one surface, with one rim and one refraction. Move your pointer over it, or drag a finger sideways across it.
Other light.
A look is a short list of tokens and optics, so there is room for more. Three sketches from other times glass mattered. Each tile runs its own look; the button puts it on the whole page.
Two lines to start.
One CSS file, one script. Every element works in any framework. React and Vue get typed wrappers with the usual props, events and v-model. A look is one attribute more.