Concepts›How glass works

How glass works

What CSS can do

CSS can blur what is behind an element with backdrop-filter, and that is all. It can't move pixels, so it can't bend light. To bend light you need a program that runs for every pixel, and in a browser that is a shader on the graphics card. WebGL is the way to run one.

Where glass gets its picture

For security reasons a page can't read its own pixels. So glass can't simply look at what is behind it. It has to find the source: an image, a video, a canvas or a solid colour. That is why Backdrop matters.

What happens in a frame

First glass finds its source and uploads it to the graphics card. Then the shader works out the curved edge of your shape and, for each pixel, where the light would come from. It reads that spot, splits the colours, adds frost and the highlight. The result is drawn into a canvas inside your element.