Frosted glass needs contrast management, subtle borders and a busy-enough backdrop.
Principles#
Glass fails on flat backgrounds — it needs color or image behind it. Keep blur 8–16px, background alpha 50–70%, and add a 1px white/20 border to define the edge. Use the .glass component for all three.
Applied#
- Apply it to your next feature, not a mythical redesign
- Encode the decision as a token or component
- Write one paragraph of team guidance
- Audit an existing page against the principle
Related#
design/index|Design guides · themes/index|Themes