# CSS box shadow: sombras suaves em camadas que parecem reais

[Canonical HTML page](https://gradiently.design/pt-br/guide/css-box-shadow)

Uma única box-shadow cinza é o jeito mais rápido de fazer uma interface parecer um modelo pronto. Sombras reais são várias sombras ao mesmo tempo, tingidas e mais discretas do que você imagina.

## The short version

- A propriedade box-shadow do CSS aceita a palavra-chave opcional inset, dois deslocamentos, um raio de desfoque, um raio de espalhamento e uma cor.
- Uma única box shadow parece artificial porque objetos reais projetam uma sombra de contato nítida e uma sombra larga e suave ao mesmo tempo.
- Empilhar de três a cinco sombras, cada uma com cerca do dobro do deslocamento e do desfoque da anterior e baixa opacidade, produz uma sombra suave e convincente.
- Tingir a sombra na direção do matiz do fundo fica mais natural que preto puro em superfícies coloridas ou quentes.
- Animar a box-shadow redesenha a cada quadro, então faça a opacidade de um pseudoelemento que carrega a sombra maior aparecer e sumir gradualmente.

Uma **box shadow no CSS** se escreve `box-shadow: 0 4px 12px rgb(0 0 0 / 0.15)`: um deslocamento horizontal, um vertical, um raio de desfoque, um espalhamento opcional e uma cor. Essa sombra única serve para um protótipo rápido, mas raramente parece real. As sombras que convencem o olho são em camadas: várias sombras em um elemento, cada uma maior e mais tênue que a anterior, tingidas para combinar com a superfície embaixo.

## Sintaxe da box-shadow

```css
/* inset? | offset-x | offset-y | blur | spread | color */
.card { box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15); }

/* Negative spread tucks the shadow under the box */
.card { box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.25); }

/* Inset: a shadow inside the box, like a pressed well */
.well { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.12); }

/* Spread only: a hairline that follows border-radius */
.chip { box-shadow: 0 0 0 1px rgb(15 23 42 / 0.08); }

/* Several shadows, comma separated, first on top */
.card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.08); }
```

A sombra sempre segue o `border-radius`, e por isso uma sombra só de espalhamento faz um fio arredondado bem acabado sem alterar o layout.

| Valor | Padrão | Efeito |
| --- | --- | --- |
| `inset` | Desligado | Desenha a sombra dentro da borda em vez de fora |
| Deslocamento x e y | Obrigatório | Move a sombra. Luz vinda de cima significa um y positivo |
| Desfoque | 0 | Suaviza a borda. Valores maiores espalham mais o esmaecimento |
| Espalhamento | 0 | Aumenta ou reduz a sombra antes de desfocar. Negativo a recolhe |
| Cor | `currentcolor` | Use uma cor com alfa; sombras opacas parecem adesivos |

O espalhamento é o valor que a maioria pula e o que mais resolve. Um pequeno espalhamento negativo impede que um desfoque grande vaze pelas laterais.

## Por que uma única sombra parece falsa

Ponha um livro numa mesa e olhe a sombra dele. Bem na borda onde toca, a sombra é escura e nítida. Mais longe ela fica larga e tênue, porque a luz envolve o objeto de várias direções. Uma só `box-shadow` só consegue ser uma dessas coisas por vez: curta e dura, ou larga e borrada. De qualquer modo o olho percebe que falta algo.

### Sombra única

- Um desfoque médio em preto a 25 por cento
- Halo cinza em volta de todo o cartão
- Difícil saber a que altura o cartão flutua
- Fica suja em fundos coloridos

### Sombra em camadas

- Quatro sombras, cada uma mais tênue e mais larga
- Densa perto da borda, leve ao longe
- A altura se lê num relance
- Tingida para assentar naturalmente na superfície

## Como empilhar box shadows

O método é simples: comece pequeno e nítido e depois dobre o deslocamento e o desfoque a cada camada extra, mantendo cada uma tênue. As opacidades se somam onde as camadas se sobrepõem, então os valores individuais podem ser surpreendentemente baixos.

1. **Comece com uma sombra de contato** `0 1px 1px` com cerca de 8 por cento de opacidade. É a linha escura bem sob a borda.
2. **Dobre a cada camada** Depois `0 2px 2px`, `0 4px 4px`, `0 8px 8px`. Deslocamento e desfoque crescem juntos, então a luz parece vir de cima.
3. **Mantenha cada camada tênue** Entre 5 e 10 por cento cada. Se o resultado ficar pesado, remova a maior camada antes de escurecer qualquer coisa.
4. **Tinja a cor** Troque o preto por uma versão profunda do matiz do fundo, como um azul-marinho em páginas azuis ou um marrom em creme.

```css
:root {
  /* Shadow colour as channels, so opacity can vary per layer */
  --shadow-color: 222 47% 11%;

  --shadow-sm:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.06);

  --shadow-md:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.05);

  --shadow-lg:
    0 1px 1px hsl(var(--shadow-color) / 0.07),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.06),
    0 16px 16px hsl(var(--shadow-color) / 0.05),
    0 32px 32px hsl(var(--shadow-color) / 0.04);
}

.card { box-shadow: var(--shadow-md); }
.dialog { box-shadow: var(--shadow-lg); }
```

Uma escala de elevação de três passos como propriedades personalizadas. Mude `--shadow-color` uma vez e toda sombra do sistema acompanha.

Guardar sombras como variáveis as transforma em design tokens, o que mantém todo cartão, menu e diálogo consistente. [Variáveis CSS para temas](https://gradiently.design/pt-br/guide/css-custom-properties-theming) e [design tokens](https://gradiently.design/pt-br/guide/design-tokens) mostram como ligá-las em um tema completo.

## Uma escala de elevação para uma interface

A sombra é um sinal de altura, então deve significar a mesma coisa em todo lugar. Escolha três ou quatro níveis e atribua funções. O que flutua mais alto ganha uma sombra maior e mais suave, nunca só mais escura.

| Nível | Token | Use para |
| --- | --- | --- |
| 0 | nenhuma, ou um fio de espalhamento de 1px | Campos, linhas de tabela, cartões chapados sobre página tingida |
| 1 | `--shadow-sm` | Cartões em repouso, botões que devem parecer clicáveis |
| 2 | `--shadow-md` | Cartões com hover, menus suspensos, popovers |
| 3 | `--shadow-lg` | Diálogos, painéis, qualquer coisa sobre uma página escurecida |

Quatro níveis cobrem quase toda interface. Mais que isso e as pessoas deixam de distingui-los.

## Sombras em fundos coloridos e escuros

Sombras de preto puro ficam cinzentas e turvas em superfícies coloridas, do mesmo modo que preto misturado à tinta a opaca. Tire a cor da sombra do fundo: uma sombra azul-petróleo profunda numa página menta, um ameixa escuro numa lilás. Em fundos com gradiente, pegue o ponto mais escuro do gradiente e use com baixa opacidade.

- Página menta: #f0fdfa
- Sombra azul-petróleo: #134e4a
- Página lilás: #faf5ff
- Sombra ameixa: #3b0764
- Página creme: #fdf6ec
- Sombra de úmbria: #451a03

Três cores de página, cada uma com a cor de sombra que lhe convém. Use os tons de sombra a 5 a 10 por cento por camada.

No modo escuro, as sombras quase desaparecem, porque há pouca luz para bloquear. Mostre a altura deixando as superfícies elevadas um pouco mais claras e mantenha um fio tênue na borda. [Design de modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design) passa pelas cores de superfície. Para painéis que flutuam sobre imagens, um [backdrop filter](https://gradiently.design/pt-br/guide/css-blur-background) muitas vezes separa as camadas melhor que uma sombra mais pesada.

## Animar a box-shadow sem engasgos

Mudar a `box-shadow` no hover obriga o navegador a redesenhar a sombra a cada quadro da transição. Em um botão, tudo bem. Em uma grade de cinquenta cartões, engasga. A solução padrão é pôr a sombra maior em um pseudoelemento e animar a opacidade dele, o que o navegador compõe a baixo custo.

```css
.card {
  position: relative;
  box-shadow: var(--shadow-sm);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card::after { transition: none; }
}
```

As duas sombras são pintadas uma vez. O hover só muda a opacidade, então nada é redesenhado durante a transição.

Mais sobre o que custa tempo de pintura está em [desempenho de gradientes CSS](https://gradiently.design/pt-br/guide/css-gradient-performance), e a mesma abordagem em camadas serve para botões em [botões com gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-button).

## Quando dispensar a sombra

Sombras separam uma superfície do que está atrás. Se o fundo é um gradiente rico ou uma fotografia, uma sombra forte briga com ele. Muitas vezes um fundo mais quieto faz mais pelo cartão do que qualquer sombra. Os Marks do Gradiently foram feitos para isso: cada um é um fundo vivo com suas cores, luz e granulado, e as palavras que você coloca sobre ele continuam legíveis porque o Mark se acalma atrás delas, sem caixas nem sombras fazendo o trabalho.

## FAQ

### Quais são os valores da box-shadow no CSS?

Um `inset` opcional, um deslocamento horizontal, um vertical, um raio de desfoque, um raio de espalhamento e uma cor, por exemplo `0 4px 12px 0 rgb(0 0 0 / 0.15)`.

### Como faço uma box shadow suave no CSS?

Empilhe de três a cinco sombras, dobrando o deslocamento e o desfoque a cada vez, com 5 a 10 por cento de opacidade cada. Tinja-as na direção da cor do fundo.

### Como adiciono mais de uma box shadow?

Separe-as por vírgulas em uma única declaração `box-shadow`. A primeira listada é desenhada por cima.

### O que o espalhamento faz na box-shadow?

Ele aumenta ou reduz a sombra antes de ela ser desfocada. Um espalhamento negativo impede que um desfoque grande apareça nas laterais da caixa.

### Animar a box-shadow prejudica o desempenho?

Ela redesenha a cada quadro. Ponha a sombra do hover em um pseudoelemento e faça a transição da opacidade dele.