Inside the glass

One element.
Seven layers.

Scroll to take it apart.

1 The page behind
Everything the glass sits on: text, photos, your app. The browser hands it to the filter as SourceGraphic.
2 Frost
feGaussianBlur softens it. About 3 px here; regular glass uses 10.
3 The refraction map
Computed once in JavaScript. Each pixel stores how far light bends there: red for sideways, green for up and down, grey for none. Flat middle, steep rim.
4 Three bends
feDisplacementMap moves the pixels, once per colour at slightly different strength. Red bends most. That is the rainbow at the rim, turned up here so you can see it.
5 Colour grade
feColorMatrix and feComponentTransfer: more saturation, less contrast. The part we fitted against Apple.
6 Tint and rim light
Plain CSS on top: a background colour, and a highlight image that is brightest where the rim faces the light.
7 The shape
border-radius clips all of it to a capsule. Change the size and steps 3 and 6 are recomputed. Nothing else is.

Back to one element.

The browser redraws steps 1 to 5 on the GPU as the page moves. JavaScript only runs when the size changes.