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.
- 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 92–100 %, flanks 15–30 %, counter 50–65 %; dark: key 60–75 %, flanks 10–18 %, counter 30–40 %; a 1 px dark edge line outside the rim (black 10–14 % light, 28–36 % dark); inner glow 6–10 px, 50–80 % 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.
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.Questions
Where should specular be used?
Every glass body; it separates glass from the backdrop on busy and on flat scenes.
When should specular be avoided?
Uniform white border; thick glowing outlines; painted gloss stripes across the face; dark inner shadows (bevel/emboss).
How is specular built on the 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.