Reach
One look. Four roads for the light.
The rim, the tint, the shadow, and the motion are the same everywhere. Only the way the picture behind the glass is bent changes, and the library picks the road.
This browser is using a renderer.
Backdrop refractionChrome, Edge, Opera, Samsung Internet, Electron Scene renderingSafari 16.4+, iOS, iPadOS, Firefox 103+ Calibrated frostOlder browsers
Where each one runs
| Renderer | Engine name | Where | How |
|---|---|---|---|
| Backdrop refraction | backdrop | Chrome, Edge, Opera, Samsung Internet, and Electron | An SVG displacement map on backdrop-filter, over the live page. Nine-slice tiles, so a resize does not rebuild the map. |
| Scene, WebGL | scene-gl | Safari 16.4+ on macOS, every browser on iOS and iPadOS, and Firefox 103+, inside a scene whose backdrop is an image, video, or canvas | One shared WebGL context. Rounded rect, rim normals, refraction, magnification, dispersion, frost, and tone. |
| Scene, DOM | scene-dom | Those same browsers, when the scene's backdrop is live DOM | The scene filters its content layer once, with a subregion per surface. Keep these scenes small. |
| Calibrated frost | css | Anything that cannot do the two paths above | A backdrop-filter blur with the same rim light, tint, shadow, and motion. |
Why scenes exist
WebKit does not apply SVG filters inside backdrop-filter (WebKit bug 245510). No library can bend arbitrary page content there. Put the thing you want refracted inside <glass-scene>. Chromium ignores the scene and keeps the backdrop path, unless you set force.
Glass inside a scene is found automatically, including glass that lives in a shadow root.
What you can count on
- Current Chrome, Edge, Opera, and Samsung Internet. Safari 16.4+ on macOS, Firefox 103+, and the iOS and iPadOS browsers that use WebKit.
- No WebGPU. The WebGL path is used only for scenes, and only where it is available.
- Server rendering for the React, Vue, and Svelte bindings. Elements stay inert until hydration via
defer-hydration, then take their roles. - A page that still reads correctly when refraction is unavailable, because the frost fallback keeps the same layout, type, and focus ring.