Glass variant

Glass Physics

Glass is one surface variant in Glin UI. It layers blur, saturate, a translucent fill, and a brighter refraction edge so a panel reads as a pane over its backdrop.

Glass tokens Glass card

Glass lab

Tune blur, opacity, and saturate over a vivid backdrop, then copy the CSS. Always pair saturate with blur: blur alone turns colors gray.

Glass panel

blur 16px, opacity 18%, saturate 180%

Blur16px

Opacity18%

Saturate180%

CSS

.glass-surface {
  background: rgb(255 255 255 / 0.18);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-top-color: rgb(255 255 255 / 0.4); /* refraction edge */
}

Elevation levels

Five levels combine blur, fill opacity, refraction border, and shadow depth into reusable surfaces. Use .glass-1 to .glass-5.

glass-1

blur 8px

opacity L:0.08 D:0.20

shadow glass-sm

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. Dark mode uses a black base at higher opacity for readability. Glass levels 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 adjusts opacity, borders, and saturation to the brightness behind it.

data-glass-luminance="bright"

surface x1.16

data-glass-luminance="neutral"

surface x1

data-glass-luminance="dim"

surface x0.9

Performance and accessibility

Backdrop filters are expensive. Hint the compositor on heavy surfaces, limit stacked glass, and respect reduced transparency: the tokens swap to near-opaque fills and drop the filter.

.glass-gpu-hint

will-change: transform, opacity

.glass-heavy

will-change: backdrop-filter, transform, opacity

Keep text on glass at 4.5:1 contrast or better. Check pairs in the color contrast guide.