Building Glass for the Web<br>Back

In June last year Apple announced Liquid Glass at WWDC, a fresh design language built around the physics of light bending through curved glass. It was a bold move that immediately captured the imagination of designers and developers alike.

We felt inspired to bring that same magic to our apps, starting by bringing our own version of the effect to our Aave App for iOS and Android, which we call Aave Glass.

This quickly became a defining part of the Aave App experience, making our interfaces feel more alive and tactile.

We want to bring this same feeling to the experiences we build on the web.<br>The challenge with the web

In the months that followed WWDC, we saw a wave of interest from others who also felt inspired to recreate the effect for the web. Most of the demos and experiments that surfaced only ran in Chromium browsers. They leaned on either an SVG backdrop-filter approach or the experimental HTML-in-Canvas API hidden behind a flag, and neither holds up in other browsers.

Before building our own, we worked through the approaches already going around.

ApproachChromiumSafariFirefoxSVG backdrop-filter✓✕✕HTML-in-Canvas APIBehind flag✕✕Our technique✓✓✓

Our technique runs in every modern browser, on desktop and on mobile, with no flags to turn on and no fallbacks to maintain. It just works.

A family of components

Building a cross-browser effect that works on any content was only the first step. We wanted to make sure it could be used in real interfaces, and that it could bring the same sense of delight to our web experiences as it does in our mobile apps.

So we built a family of components that use the glass as a core part of their experience.

Even with a small component like this switch, the glass effect adds a sense of depth and tactility.

Mobile apps rely on switches for binary choices, and glass suits them well. The thumb of the switch is a small lens that creates a moving highlight as you toggle.

The content renders normally and stays visible everywhere outside the lens, the whole ideology behind our technique is that it refracts live HTML, the real rendered content.

To achieve the glass effect on the handle we give our glass component a copy of the track's fill that sits on its own layer and gets bent by the glass. The fill registers as a moving highlight that gives the switch a sense of depth and tactility.

Glass<br>lens={{ lensW: 90, lensH: 60, borderRadius: 30 }}<br>x={progress} // lens acts as the thumb (0–1 across the track)<br>SwitchTrack /><br>Glass>

Native elements are back-synced with our custom component.

A slider is also a natural home for the effect. The glass travels along the track, refracting the fill beneath it as it goes, and the value you're setting stays visible right through the glass.

Dragging is cheap to animate. As the handle moves, only the filter's region shifts along the track while the displacement map stays the same, so the motion holds a steady frame rate even on a phone. The map is regenerated only when the glass changes shape, never when it simply changes place.

The slider leans on a gentler bend than the switch, a fraction of the refraction strength, since the fill underneath has to stay readable as a value rather than just register as a moving highlight.

// Same refractionTarget trick, a softer bend, the handle drives the lens.<br>Glass<br>lens={{ lensW: 90, lensH: 60, borderRadius: 30 }}<br>x={handlePosition}<br>refractionTarget={TrackFill progress={progress} />}<br>SliderTrack /><br>Glass>

HubsSpokesReservesAssetsChains

Hubs<br>Spokes<br>Reserves<br>Assets<br>Chains

The glass effect helps visually highlight the selected option.

The toggle group uses the glass itself as the selection indicator, gliding<br>between options and easing towards the one you pick.

As with the switch, the glass refracts a highlighted pill rather than the buttons behind it, so the selected option stays legible whichever label sits underneath. It eases between options with a spring rather than a straight slide, so the selection settles into place instead of snapping.

// The glass is the selection indicator. It bends a highlighted copy of<br>// the options and springs to the one you pick.<br>Glass<br>lens={selectionLens}<br>x={selectedOptionPosition}<br>refractionTarget={HighlightedOptions />}<br>ToggleGroup options={options} /><br>Glass>

The switch, slider, and toggle group all lean on the same technique.

For a more complex effect that still feels at home on the web, we built a QR code component that wraps the code in a glass effect, bending the pixels of the code when tapped to create a satisfying tactile response. The refraction adds a sense of depth and physicality to the interaction.

The QR code is fully interactive. Click the Aave logo to see the glass effect in action.

The QR is painted to its own canvas, so there's no live DOM here for an SVG filter to bend. We generate the same displacement map the rest of the family uses and hand it to a WebGL shader that refracts the code's own pixels. The...