Effect

Liquid glass refraction

The scene behind is pulled inward and magnified through the shape: strongest at the silhouette, fading smoothly across the bezel band, calm in the centre.

A convex circular lens over a dark calibration grid, magnifying the lines across its whole face and curving them most toward 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: Every liquid-glass body. It is the defining effect.
Avoid: Refracting text/icons on the glass; displacement past the profile's limit, so the image folds (rings, mirrored content); an edge profile that stands vertical at the silhouette, which packs the bend into 1–2 px and reads as blur-only; refraction over flat colour where it cannot be seen.

Parameters. bezel = corner radius (panels 24–28, capsules and circles h/2); displacement 0.4 × bezel (bevel) or 0.5 × radius (convex circle), press +15 %; fold limit 0.5 × bezel (bevel), 0.67 × radius (convex), 0.17 × bezel (rim); the same values over photos, text and grids. Profiles bevel/convex/rim: shift (1 − s)², ρ(1 + ρ)/2, the bevel over the outer 35 %.

How it is built

Design tool: Figma Glass effect: Refraction 50–90, Depth ≈ bezel. Manual: masked backdrop copy scaled 106–110 % plus an edge-ring copy scaled 115–125 %.
Web: Tier A: SVG feDisplacementMap from an SDF displacement map, applied with backdrop-filter: url(#id) (Chromium). Tier C: WebGL shader sampling the backdrop at an inward offset.

Shader, in one line

offset = -normal(sdf) * bend(depth) * displacement; sample backdrop at px + offset. bend(s) = (1 - s)^2 (bevel), (1 - s)(2 - s)/2 (convex): the slope of a rounded edge, finite at the silhouette.

Questions

Where should refraction be used?

Every liquid-glass body. It is the defining effect.

When should refraction be avoided?

Refracting text/icons on the glass; displacement past the profile's limit, so the image folds (rings, mirrored content); an edge profile that stands vertical at the silhouette, which packs the bend into 1–2 px and reads as blur-only; refraction over flat colour where it cannot be seen.

How is refraction built on the web?

Tier A: SVG feDisplacementMap from an SDF displacement map, applied with backdrop-filter: url(#id) (Chromium). Tier C: WebGL shader sampling the backdrop at an inward offset.