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