Glass
One material for everything that floats, with real refraction where the browser can draw it.
The decision
- The problem
Frosted glass at 80% was dead, and bare glass couldn't be read.
- What I chose
A 60% theme tint with blur and saturation, and real edge refraction wherever the browser can draw it.
- Ruled out
Faking refraction with an image. Chrome bends the backdrop for real; Safari and Firefox keep the frosted glass, and nothing else changes.
- What it cost
A displacement map drawn for each surface from its own shape, and drawn again when it changes size.
The material
Everything that floats shares one material: the navbar capsule, the mobile menu card, the chapter index of the cases, the view pill, and the section rail and page list you are using now. 60% theme tint, blur 16, saturate 170%.
One material at two scales: the capsule and the panel differ only in radius. At the rim the outlines underneath bend outward: that is the refraction, not a border. The panel is the only specimen here whose values are copied rather than read from the stylesheet: the real one is fixed to the edge of the screen and cannot be dropped into a card.
Chrome and Safari
In Chrome the backdrop bends at the rim. A map generated from the rounded shape of each surface pushes the pixels outward in a narrow band along the edge and leaves the centre alone, so the text inside stays calm. Safari and Firefox don't accept that filter on the backdrop, so they show the same surface with the plain frosted blur.
Safari has one more exception. The cursor blends with whatever is under it, and over glass that blend doubled the text while scrolling, so over glass surfaces the cursor drops the blend.
Play with the glass
The panel from the top of this page, over the same photo. Drag it, change its tint, blur and saturation, and switch the refraction off to see what Safari shows. The number is the contrast of its white label against the average colour under it, tint included.
The view pill
Shown on colour, because on a flat dark panel none of this is visible. Saturation can only be judged against colour: the same orange inside the glass is not the same orange outside it.
The pill replaces the cursor over any large clickable surface and says what will happen. Its glass is dark on purpose: it rides over photographs, and a light tint dropped its own white label to 1.05:1 on the brightest ones. At 40% black the label clears AA against the mean luminance of the six project images; the worst is 5.4:1.
Where it isn't used
The contact panel is solid. The eye has to stay on the conversation, and a moving backdrop competes with it. And glass needs something to be transparent over: the journal header runs under the navbar so the effect can be seen at all.