Elevation
The system has one shadow. It lifts an element slightly when you hover it. At rest, nothing has a shadow.
How to use the shadow
-
Use
--shadow-hoveron hover for buttons, cards, form fields and tags. At rest, usebox-shadow: none. - Animate the change with the motion roles, so it follows reduced motion.
-
The shadow is stronger in dark mode, so it can still be seen against a dark background. Its color comes
from
--shadow-color-hover. - Do not let the shadow be the only sign of a state. Combine it with a change in border or color.
At rest and on hover
--shadow-hoverThe shadow token
--shadow-hover: Buttons, cards, form fields and tags on hover. At rest they have no shadow.
| Part | Value | Token |
|---|---|---|
| Offset x | 0 px | – |
| Offset y | 2 px | --shadow-offset-2 |
| Blur | 4 px | --shadow-blur-4 |
| Spread | 0 px | – |
| Color | Light: oklch(0% 0 0 / 15%) Dark: oklch(0% 0 0 / 90%) |
--shadow-color-hover
|
Primitives
The raw sizes behind the shadow. The name is the value in pixels. More levels will be added when a component needs one, such as a dialog.
| Token | Value |
|---|---|
--shadow-offset-2
|
0.125rem
|
--shadow-blur-4
|
0.25rem
|