Effect

Liquid glass frost

The backdrop behind the glass turns into soft colour, with a faint grain; edges still bend.

A frosted rounded pane over dunes and sky, with the dune bands blurred inside.

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 and text-heavy surfaces: dialogs, sheets, sidebars, long menus, notifications. Small controls get almost none.
Avoid: Frost without refraction and rim (glassmorphism card); frost so strong the colour from behind disappears; greying the backdrop.

Parameters. blur 0.5–1 (lens), 2–6 (regular), 10–20 (frost); grain ±1–2 px UV jitter; fill white 24–34 % light / black 36–46 % dark.

How it is built

Design tool: Figma Glass: Frost 2–20. Manual: background blur 3–24 + fill 20–30 %; optional 2–4 % noise layer.
Web: feGaussianBlur after feDisplacementMap inside the same filter; fallback backdrop-filter: blur() saturate(1.5).

Shader, in one line

jitter the sample position with hash noise (±1.5 px) and average 4–13 taps around the refracted position; mix with the sharp sample by the frost amount.

Questions

Where should frost be used?

Large and text-heavy surfaces: dialogs, sheets, sidebars, long menus, notifications. Small controls get almost none.

When should frost be avoided?

Frost without refraction and rim (glassmorphism card); frost so strong the colour from behind disappears; greying the backdrop.

How is frost built on the web?

FeGaussianBlur after feDisplacementMap inside the same filter; fallback backdrop-filter: blur() saturate(1.5).