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.

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

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once

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 1–3 % of the refraction offset, weighted by bend² so the split grows as bend³ and stays at the rim; 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.02 * bend * bend; col = vec3(tex(px + off*(1-k)).r, tex(px + off).g, tex(px + off*(1+k)).b).

Questions

Where should dispersion be used?

Accent only: hero lenses, large clear glass over high-contrast media, selected/hero states. Faint or off on everyday chrome.

When should dispersion be avoided?

Rainbow over the whole surface, fringes on text, dispersion on frosted panels (it vanishes into blur anyway).

How is dispersion built on the 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.