Effect

Liquid glass light spill

Light from colourful content beside large glass tints its inner glow and its shadow on that side, and the shadow grows where the glass sits over busy text and shrinks over calm colour, so large glass belongs to what is around it.

Light spill: a frosted glass now-playing panel beside a vivid pink-to-blue artwork tile over pastel ribbons, its glow on the side facing the art.

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: Large glass beside colourful content: sidebars and inspectors next to artwork or photos, a mini player over album art, a toolbar above a bright hero.
Avoid: Small controls (the effect is invisible and muddies them); strong colour casts that look like a tint material; colour that changes with every scroll frame (update it when the content changes).

Parameters. the content's average colour at 6–12 % in the inner glow on the side facing it and in the shadow; shadow opacity +30–50 % over high-frequency backdrops (text, fine lines), −20 % over calm colour.

How it is built

Design tool: Add an inner shadow on the content side in the content's colour at 8–10 % and tint the drop shadow the same; raise the drop shadow where the glass covers text.
Web: Set --spill to the content's colour; the glow layer adds an inset shadow in color-mix(in srgb, var(--spill) 10%, transparent) on that side and the shadow takes the same tint (web recipe section G).

Shader, in one line

glow.rgb = mix(white, spillColour, 0.1) on the facing side; shadow alpha × (1 + 0.4 × backdropContrast).

Questions

Where should light spill be used?

Large glass beside colourful content: sidebars and inspectors next to artwork or photos, a mini player over album art, a toolbar above a bright hero.

When should light spill be avoided?

Small controls (the effect is invisible and muddies them); strong colour casts that look like a tint material; colour that changes with every scroll frame (update it when the content changes).

How is light spill built on the web?

Set --spill to the content's colour; the glow layer adds an inset shadow in color-mix(in srgb, var(--spill) 10%, transparent) on that side and the shadow takes the same tint (web recipe section G).