Elevation

Creates spatial relationships by lifting elements from the background.

Token

CSS Variable

Value

Preview

$focus-ring

--sl-focus-ring

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

$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

Rationale Rationale