Elevation
Shadow tokens, shown on a surface in both themes.
Elevation is a box-shadow token. In dark, shadows carry little, so every level adds a hairline ring
(--nz-elevation-ring) that is transparent in light.
Light
elevation-0elevation-1elevation-2elevation-3elevation-4elevation-buttonfocus-ringfocus-ring-criticalfocus-ring-raisedsurface-inner-highlightDark
elevation-0elevation-1elevation-2elevation-3elevation-4elevation-buttonfocus-ringfocus-ring-criticalfocus-ring-raisedsurface-inner-highlightValues
| Token | Value |
|---|---|
--nz-elevation-0 | 0 0 0 0 transparent |
--nz-elevation-1 | 0 0 0 1px var(--nz-elevation-ring), 0 1px 1px 0 light-dark(rgb(16 19 17 / 0.03), rgb(0 0 0 / 0.18)), 0 1px 2px 0 light-dark(rgb(16 19 17 / 0.04), rgb(0 0 0 / 0.24)) |
--nz-elevation-2 | 0 0 0 1px var(--nz-elevation-ring), 0 8px 16px -4px light-dark(rgb(16 19 17 / 0.05), rgb(0 0 0 / 0.3)), 0 2px 4px 0 light-dark(rgb(16 19 17 / 0.04), rgb(0 0 0 / 0.24)) |
--nz-elevation-3 | inset 0 1px 0 0 var(--nz-elevation-highlight), 0 0 0 1px var(--nz-elevation-ring), 0 16px 32px -8px light-dark(rgb(16 19 17 / 0.08), rgb(0 0 0 / 0.48)), 0 4px 8px 0 light-dark(rgb(16 19 17 / 0.05), rgb(0 0 0 / 0.3)) |
--nz-elevation-4 | inset 0 1px 0 0 var(--nz-elevation-highlight), 0 0 0 1px var(--nz-elevation-ring), 0 32px 64px -12px light-dark(rgb(16 19 17 / 0.14), rgb(0 0 0 / 0.6)), 0 8px 16px 0 light-dark(rgb(16 19 17 / 0.06), rgb(0 0 0 / 0.36)) |
--nz-elevation-button | inset 0 1px 0 0 rgb(255 255 255 / 0.16), 0 1px 2px 0 rgb(10 33 26 / 0.18) |
--nz-focus-ring | 0 0 0 2px var(--nz-bg-surface), 0 0 0 4px var(--nz-border-focus), 0 0 0 8px rgb(46 130 88 / 0.16) |
--nz-focus-ring-critical | 0 0 0 2px var(--nz-bg-surface), 0 0 0 4px var(--nz-border-focus), 0 0 0 8px rgb(214 74 46 / 0.22) |
--nz-focus-ring-raised | 0 1px 2px 0 rgb(10 33 26 / 0.18), inset 0 1px 0 0 rgb(255 255 255 / 0.16), 0 0 0 2px var(--nz-bg-surface), 0 0 0 4px var(--nz-border-focus), 0 0 0 8px rgb(46 130 88 / 0.16) |
--nz-surface-inner-highlight | inset 0 1px 0 0 rgb(255 255 255 / 0.7) |