Building Glass for the Web

How Aave built a cross-browser refractive glass effect with feDisplacementMap

Tier A · StrongArticleaave.com

An engineering write-up from the Aave Labs design team on building an Apple-Liquid-Glass-style refraction effect that works outside Chromium. The technique generates a displacement-map PNG and drives it through the SVG `feDisplacementMap` filter primitive so real rendered pixels bend behind the element, rather than relying on the Chromium-only backdrop tricks most demos use; where SVG filters cannot reach — a canvas-drawn QR code, video-player controls in Safari — the team falls back to a WebGL shader. It then walks through the component family the effect produced: a toggle with a glass thumb, a slider tuned for readable values, a spring-animated toggle-group indicator, a QR code and video controls. Written by Lochie Axon with research by Abhijeet Singh; no library is released.

For an agent

Reach for this when a user asks for 'liquid glass' or iOS-26-style refraction and you are about to reply that it is Chromium-only — this article is the reference for the feDisplacementMap approach that ships in Safari and Firefox too, and it is more honest about the cost than the usual CodePen demos. There is no package to install, so you are reimplementing from the description: budget for generating the displacement map as an asset, and expect to drop to a WebGL shader for anything drawn on a canvas or a video surface. Watch the performance and reduced-motion story — a full-page filter of this kind is expensive and the article's components are small on purpose.

Why it is here. One of the few glass write-ups that solves the cross-browser problem instead of shipping a Chromium-only demo, and it shows the effect shaping a real component family rather than a hero card.

Install command, framework, licence and component list.

Facts

License: Unknown
Pricing: Free
Framework: Unknown
Styling: Vanilla CSS, Shader / GLSL
Distribution: Article, thread, or post
Platform: Web
Content type: Prose / writing, Code
Agent readiness: No agent surface
Accessibility: Unknown
Maturity: Stable

Notable for

feDisplacementMap instead of backdrop-filter
works in Safari and Firefox
WebGL fallback for canvas and video
toggle, slider, toggle-group, QR, player
no library released

Provenance

Verified 2026-08-15. HTTP 200. https://aave.com/design/building-glass-for-the-web (WebFetch, full article), https://aave.com/design (WebFetch — section index, only this one article listed)

Also in Essays, Guides & Courses

aave.comTier A