Shadow
Hierarquia de elevação — hairline, card, dropdown, modal, drawer. Sombras são linguagem de Z, não de "deixa bonito".
Sombra em UI não é decoração — é hierarquia de elevação. Cada nível de sombra corresponde a uma distância do leitor: hairline está colado na superfície, card flutua um pouco, modal flutua muito. Quando todas as sombras são "igualmente bonitas", você perdeu a hierarquia.
Como a escala funciona
Sete stops de box-shadow (2xs → 2xl) cobrem a hierarquia
de elevação completa. Três stops de inset-shadow dão
profundidade reversa (afundamento, pressed states, wells). Mais
seis de drop-shadow (que aplicam em SVG e elementos com forma
não-retangular).
A escala segue um princípio claro: quanto maior o stop, maior a distância e mais difusa a sombra. Isso simula iluminação real — um objeto mais alto projeta sombra mais espalhada e suave.
Box shadow (elevação)
A escala canônica para elementos retangulares — cards, dropdowns, popovers, modais.
| 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 (afundamento)
Para inputs rebaixados, áreas de well, ou estados pressed.
| 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 |
Boas práticas
- Pareie sombra com z-index.
shadow-smem cards no fluxo,shadow-mdem hover,shadow-lgem popovers,shadow-xlem modais,shadow-2xlem drawers fullscreen. - Em dark mode, sombras pretas raramente funcionam. O Tailwind v4 mantém as mesmas definições — você pode considerar reduzir a opacidade ou usar inner-glow em vez de drop-shadow no dark.
- Não use mais de 3 níveis na mesma tela. Mais que isso, a hierarquia vira ruído.
- Hover de cards estáticos geralmente sobe um stop:
shadow-sm→shadow-md. É um sinal sutil de "isso é clicável". - Drop-shadow em SVG dá resultado superior a box-shadow para ícones e ilustrações com forma não-retangular.