Effect

Liquid glass caustics

Bright, wavy, focused light lines and cells — the network of light at the bottom of a pool or cast by a glass on a table.

A frosted rounded pane over an animated caustic light network on deep teal.

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: Backgrounds and hero scenes (water, wellness, weather, AI ambience), light cast by a large glass object onto the surface below. Use sparingly and dimly behind chrome.
Avoid: Bright caustics directly behind text-bearing glass (kills legibility); fast animation; caustics as a UI fill.

Parameters. cell scale 3–7 cells per 300 px, intensity 20–40 % additive, two layers at different scales/speeds, animation 0.2–0.6 units/s.

How it is built

Design tool: Use a caustic texture (photo or generated Voronoi-edge pattern) in Screen/Add at 20–40 %, slightly blurred, tinted to the light colour.
Web: WebGL/canvas background (see caustics() in the web recipe); CSS fallback: a looping caustic texture video or image with mix-blend-mode: screen.

Shader, in one line

Worley cell borders: pow(1 - smoothstep(0, 0.3, F2 - F1), 3), multiply two animated layers, add to the backdrop.

Questions

Where should caustics be used?

Backgrounds and hero scenes (water, wellness, weather, AI ambience), light cast by a large glass object onto the surface below. Use sparingly and dimly behind chrome.

When should caustics be avoided?

Bright caustics directly behind text-bearing glass (kills legibility); fast animation; caustics as a UI fill.

How is caustics built on the web?

WebGL/canvas background (see caustics() in the web recipe); CSS fallback: a looping caustic texture video or image with mix-blend-mode: screen.