# Liquid glass dispersion: parameters and references

Source: https://meniscus.site/effects/dispersion · Updated 2026-09-27

**Looks like:** 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.

**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.

**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:** `k = 0.04 * bend; col = vec3(tex(px + off*(1-k)).r, tex(px + off).g, tex(px + off*(1+k)).b).`

## References

![A clear circular lens over a night skyline, with red, green and blue fringes on the window lights near its rim.](https://meniscus.site/gallery/dispersion-dark-studio.webp)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_effect_spec` tool returns for `dispersion`. Materials, colours, light and composition rules that apply to every effect are in the [liquid glass guide](https://meniscus.site/liquid-glass). Connect: `claude mcp add --transport http meniscus https://meniscus.site/mcp` — setup for every client: https://meniscus.site/docs