Effect
Liquid glass specular
A thin bright line hugging the silhouette, brightest where the edge faces the key light (top-left): on a wide capsule the whole top edge and left cap; a dimmer counter-light along the bottom edge and right cap; a soft glow just inside the edge.
Also called rim, highlight, fresnel, rim light, edge light, shine
Where to use it
- Use in
- Every glass body; it separates glass from the backdrop on busy and on flat scenes.
- Avoid
- Uniform white border; thick glowing outlines; painted gloss stripes across the face; dark inner shadows (bevel/emboss).
Parameters
rim 1 px (1.5 on large panels); light: key 85–95 %, flanks 12–28 %, counter 45–60 %; dark: key 45–60 %, flanks 8–15 %, counter 25–35 %; inner glow 6–10 px, 40–70 % key / 20–35 % counter.
How it is built
- Design tool
- Inner shadow x1.5 y1.5 blur0 spread−0.5 white 90 % (key) + inner shadow x−1.5 y−1.5 blur0 spread−0.5 white 50 % (counter) + 0.5 px inside stroke white 22 %; glow: inner shadows x2 y3 b8 s−4 white 70 % and x−2 y−3 b8 s−4 white 35 %. Offset inner shadows follow the shape; a 135° gradient stroke does not (it lights only the left end of a wide capsule). Figma Glass: Light angle −45°, intensity 50–80 %.
- Web
- Rim: offset inset box-shadows (key +1.5/+1.5, counter −1.5/−1.5, spread −0.5, plus a 0.5 px hairline) on a layer above the optic; glow: blurred inset shadows. Both below the content.
Shader, in one line
facing = dot(normal, normalize(vec2(-1,-1))); rim = 1 - smoothstep(0, 1.5, -sdf); add rim * mix(0.5, 0.9, max(facing, 0)) and a glow that fades over the outer 35 % of the bezel.