Effect

Liquid glass tint

Glass carrying colour: accent or danger tint laid over the refraction while the backdrop still shows through and bends.

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.

Use in: Prominent buttons (glass prominent), selected states, accent/danger variants, tooltips; adaptive tint picked up from the backdrop.
Avoid: Opaque colour fills that hide the backdrop; heavy global tint on all glass; muddy desaturation.

Parameters. accent tint 25–40 % (#2B6BFF), danger 25–35 % (#E5484D); vibrancy (saturation) ×1.3–1.6 on the backdrop.

How it is built

Design tool: Fill the glass shape with the accent at 25–40 % above the refraction layers; keep the rim.
Web: Set the optic layer fill to rgba(accent, .3); feColorMatrix saturate 1.4 in the filter.

Shader, in one line

col = mix(col, tintColor, tintAmount); saturate with mix(col, luma, -0.4).

Where should tint be used?

Prominent buttons (glass prominent), selected states, accent/danger variants, tooltips; adaptive tint picked up from the backdrop.

When should tint be avoided?

Opaque colour fills that hide the backdrop; heavy global tint on all glass; muddy desaturation.

How is tint built on the web?

Set the optic layer fill to rgba(accent, .3); feColorMatrix saturate 1.4 in the filter.