Shadow
Elevation hierarchy - hairline, card, dropdown, modal, drawer. Shadows are a Z language, not a "make it pretty" tool.
Shadow in UI is not decoration - it is elevation hierarchy. Each shadow level maps to a distance from the reader: hairline sits flush with the surface, a card floats a little, a modal floats a lot. When every shadow is "equally pretty", the hierarchy is gone.
How the scale works
Seven box-shadow stops (2xs to 2xl) cover the full
elevation hierarchy. Three inset-shadow stops provide reverse
depth (sunken areas, pressed states, wells). Six more
drop-shadow stops apply to SVG and elements with
non-rectangular shapes.
The scale follows one clear principle: the higher the stop, the greater the distance and the more diffuse the shadow. This simulates real lighting - a taller object casts a wider, softer shadow.
Box shadow (elevation)
The canonical scale for rectangular elements - cards, dropdowns, popovers, modals.
| Amostra | Token | Classe | Definição | Uso |
|---|---|---|---|---|
| --shadow-2xs | shadow-2xs | 0 1px rgb(0 0 0 / 0.05) | Hairline shadow — separação sutil sem profundidade real | |
| --shadow-xs | shadow-xs | 0 1px 2px 0 rgb(0 0 0 / 0.05) | Inputs e cards de baixa elevação | |
| --shadow-sm | shadow-sm | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) | Cards default, dropdowns rasos | |
| --shadow-md | shadow-md | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | Cards interativos, hover de cards estáticos | |
| --shadow-lg | shadow-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | Popovers, dropdowns, tooltips | |
| --shadow-xl | shadow-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | Modais e dialogs | |
| --shadow-2xl | shadow-2xl | 0 25px 50px -12px rgb(0 0 0 / 0.25) | Drawers, fullscreen overlays |
Inset shadow (depth)
For sunken inputs, well areas, or pressed states.
| Amostra | Token | Classe | Definição | Uso |
|---|---|---|---|---|
| --inset-shadow-2xs | inset-shadow-2xs | inset 0 1px rgb(0 0 0 / 0.05) | Detalhe sutil em superfícies pressed | |
| --inset-shadow-xs | inset-shadow-xs | inset 0 1px 1px rgb(0 0 0 / 0.05) | Inputs rebaixados | |
| --inset-shadow-sm | inset-shadow-sm | inset 0 2px 4px rgb(0 0 0 / 0.05) | Wells, áreas de input afundadas |
Best practices
- Pair shadow with z-index.
shadow-smfor in-flow cards,shadow-mdon hover,shadow-lgfor popovers,shadow-xlfor modals,shadow-2xlfor fullscreen drawers. - In dark mode, black shadows rarely work. Tailwind v4 keeps the same definitions - consider reducing the opacity or using an inner glow instead of a drop shadow in the dark.
- Do not use more than 3 levels on the same screen. Beyond that, the hierarchy becomes noise.
- Hovering a static card usually moves up one stop:
shadow-smtoshadow-md. It is a subtle "this is clickable" signal. - Drop-shadow on SVG gives better results than box-shadow for icons and illustrations with non-rectangular shapes.