Elevation
Creates spatial relationships by lifting elements from the background.
Token
CSS Variable
Value
Preview
$focus-ring-base
--sl-focus-ring-base
0rem 0rem 0rem 0.0625rem var(--sl-color-gray-0), 0rem 0rem 0rem 0.1875rem var(--sl-color-gray-5)
$focus-ring-critical
--sl-focus-ring-critical
0rem 0rem 0rem 0.0625rem var(--sl-color-gray-0), 0rem 0rem 0rem 0.1875rem var(--sl-color-red-6)
$focus-ring-accent
--sl-focus-ring-accent
0rem 0rem 0rem 0.0625rem var(--sl-color-gray-0), 0rem 0rem 0rem 0.1875rem var(--sl-color-blue-6)
$shadow-1
--sl-shadow-1
0rem 0.25rem 1rem 0rem rgba(0, 0, 0, 0.16)
$shadow-2
--sl-shadow-2
0rem 1.5rem 3rem 0rem rgba(0, 0, 0, 0.16)
$z-1
--sl-z-1
0
$z-2
--sl-z-2
100
$z-3
--sl-z-3
200
$z-4
--sl-z-4
300
$z-5
--sl-z-5
400
$z-6
--sl-z-6
500
$z-7
--sl-z-7
600
$z-8
--sl-z-8
700
$z-9
--sl-z-9
800
$z-10
--sl-z-10
900
Want to know more about design tokens? Read the documentation (opens in a new tab).