glass-1
blur 8px
opacity L:0.08 D:0.20
shadow glass-sm
Glass Physics
Five elevation levels combine blur, opacity, refraction border, and shadow depth into reusable surfaces.
glass-2
blur 12px
opacity L:0.12 D:0.30
shadow glass-sm
glass-3
blur 16px
opacity L:0.18 D:0.40
shadow glass-md
glass-4
blur 24px
opacity L:0.25 D:0.55
shadow glass-lg
glass-5
blur 40px
opacity L:0.35 D:0.70
shadow glass-lg
Opacity Scale
Ten stops from crystal to frosted. Glass levels currently map to steps 2, 4, 6, 8, and 10.
opacity-1
L:0.06 D:0.16
opacity-2
L:0.08 D:0.20
opacity-3
L:0.10 D:0.25
opacity-4
L:0.12 D:0.30
opacity-5
L:0.16 D:0.35
opacity-6
L:0.18 D:0.40
opacity-7
L:0.22 D:0.48
opacity-8
L:0.25 D:0.55
opacity-9
L:0.30 D:0.62
opacity-10
L:0.35 D:0.70
Luminance Adaptation
Set a luminance context so glass surfaces adjust opacity, borders, and saturation to surrounding brightness.
`data-glass-luminance=\"bright\"`
surface x1.16
`data-glass-luminance=\"neutral\"`
surface x1
`data-glass-luminance=\"dim\"`
surface x0.9
Performance Hints
Use utility classes for heavy glass surfaces to keep composition on the GPU and reduce repaint churn.
`.glass-gpu-hint`
will-change: transform, opacity
`.glass-heavy`
will-change: backdrop-filter, transform, opacity