Effect

Liquid glass dispersion

A thin rainbow fringe where the glass bends the most — red and blue images separate by 1–3 px at the silhouette; in thick crystal, bright points split into spectra.

Also called chromatic aberration, chromatic, prism, rgb split, spectral, rainbow fringe

A clear circular lens over a night skyline, with red, green and blue fringes on the window lights near its rim.
A clear circular lens over a night skyline, with red, green and blue fringes on the window lights near its rim. (dark)

Where to use it

Use in
Accent only: hero lenses, large clear glass over high-contrast media, selected/hero states. Faint or off on everyday chrome.
Avoid
Rainbow over the whole surface, fringes on text, dispersion on frosted panels (it vanishes into blur anyway).

Parameters

channel offset factor 2–6 % of the refraction offset, only where bend > 0.3; 0 for small controls.

How it is built

Design tool
Figma Glass: Dispersion 0–10 (hero up to 20). Manual: duplicate the edge-ring copy twice, tint R/B, offset ±1 px, screen blend.
Web
SVG: three feDisplacementMap passes with scale × (1−k), ×1, ×(1+k) isolated per channel with feColorMatrix, then combined (costly — hero only). WebGL: sample R, G, B at slightly different offsets.
Shader, in one line
k = 0.04 * bend; col = vec3(tex(px + off*(1-k)).r, tex(px + off).g, tex(px + off*(1+k)).b).