Elevation
Hairline borders do most of the work. Three shadows exist for things that float. Dark mode makes them stronger; wireframe removes them.
Three shadows, on a surface
Hairlines do most of the work; these are for things that float. Toggle the page to dark to see them strengthen.
- shadow-kh-1
Inputs, command boxes
- shadow-kh-2
Raised cards, featured plans
- shadow-kh-3
Dialogs and menus
Shadows
| Tailwind | Looks like | Use for |
|---|---|---|
shadow-kh-1 | A 1 px lift | Inputs and command boxes |
shadow-kh-2 | A soft card shadow | Raised cards, featured plans |
shadow-kh-3 | A deep, wide shadow | Dialogs and menus |