Effect

Liquid glass iridescence

View-dependent rainbow sheen like a soap bubble or oil film: hues shift with the angle and thickness, strongest near grazing edges, usually over clear glass.

A convex lens over a dark grid with soft colour glows, with a thin-film hue band on 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: Decorative hero objects (orbs, AI/assistant spheres, badges, app-icon layers), selected hero states. Not for everyday chrome.
Avoid: Full-saturation rainbow fills on UI panels; iridescence behind body text; mixing it with heavy frost.

Parameters. film thickness 0.3–1.2 (normalised), strength 15–40 %, mostly in the outer half of the shape; animate slowly (8–20 s loops).

How it is built

Design tool: Angular gradient (cyan → magenta → yellow → cyan) at 20–40 % in Overlay/Color Dodge, masked to the rim region; add a soft specular.
Web: CSS: conic-gradient overlay with mix-blend-mode: overlay masked to the edge ring. WebGL: thin-film cosine palette driven by the view/normal angle and noise.

Shader, in one line

vec3 film = 0.5 + 0.5*cos(6.2831*(thickness*(1.0 - cosTheta) + vec3(0.0, 0.33, 0.67))); col = mix(col, col*film*1.4, strength * edgeFactor).

Questions

Where should iridescence be used?

Decorative hero objects (orbs, AI/assistant spheres, badges, app-icon layers), selected hero states. Not for everyday chrome.

When should iridescence be avoided?

Full-saturation rainbow fills on UI panels; iridescence behind body text; mixing it with heavy frost.

How is iridescence built on the web?

CSS: conic-gradient overlay with mix-blend-mode: overlay masked to the edge ring. WebGL: thin-film cosine palette driven by the view/normal angle and noise.