Docs executáveis de CSS: Box-shadow CSS

Q: Qual é a sintaxe do box-shadow?

box-shadow: offset-x offset-y blur spread color;, por exemplo box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Só os dois deslocamentos são obrigatórios; acrescente inset para desenhar a sombra dentro da caixa.

Como o box-shadow funciona

box-shadow pinta uma sombra em volta da caixa da borda de um elemento. Ela segue o border-radius, não ocupa espaço no layout e precisa de pelo menos dois valores: quanto deslocar na horizontal e na vertical.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 16px; }
    .row { display: flex; gap: 24px; flex-wrap: wrap; }
    .card {
      width: 150px; padding: 20px 12px; text-align: center;
      background: white; border-radius: 10px; font-size: 14px;
    }
    .hard { box-shadow: 6px 6px 0 #111827; }
    .soft { box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
    .inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="card hard">6px 6px 0 #111827</div>
    <div class="card soft">0 4px 12px, 15% black</div>
    <div class="card inset">inset 0 2px 6px</div>
  </div>
</body>
</html>

A sintaxe

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];

Valor	Significado	Padrão
`inset`	Desenha a sombra dentro da caixa, como uma área afundada	Por fora
offset-x	Positivo move para a direita, negativo para a esquerda	Obrigatório
offset-y	Positivo move para baixo, negativo para cima	Obrigatório
blur	O quanto a borda é suave; não pode ser negativo	`0` (borda nítida)
spread	Aumenta (positivo) ou diminui (negativo) a sombra	`0`
color	Qualquer cor; um preto semitransparente costuma ficar melhor	A cor do texto

A quantidade de comprimentos decide o significado: dois são os deslocamentos, três acrescentam o desfoque, quatro acrescentam o spread. Teste:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      width: 160px; height: 90px; margin: 32px;
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>box-shadow: <input id="val" value="0 10px 20px -5px rgb(37 99 235 / 50%)" size="36"></label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.boxShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(box).boxShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Experimente 0 0 0 4px #f59e0b (um anel), inset 0 0 12px #2563eb e -8px -8px 0 #16a34a.

Spread: anéis e sombras de um lado só

O spread muda o tamanho da sombra antes do desfoque. Dois padrões saem disso:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spread</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
    .box { width: 140px; padding: 18px 10px; text-align: center; background: white; border: 1px solid #e5e7eb; font-size: 14px; }
    .ring { box-shadow: 0 0 0 4px #2563eb; border-radius: 8px; }
    .double { box-shadow: 0 0 0 3px white, 0 0 0 6px #16a34a; border-radius: 8px; }
    .bottom { box-shadow: 0 10px 8px -8px rgb(0 0 0 / 50%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box ring">4px ring</div>
    <div class="box double">gap then ring</div>
    <div class="box bottom">bottom only</div>
  </div>
</body>
</html>

Um anel: sem deslocamento, sem desfoque, só spread. Ao contrário de uma borda, ele não muda o tamanho do elemento, então é um bom indicador de foco (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
Um anel com vão: empilhe um spread branco embaixo de um colorido maior.
Um lado só: mova a sombra para baixo e encolha com um spread negativo, para que ela só apareça embaixo.

Sombras em camadas para uma profundidade realista

Sombras reais têm uma parte escura e nítida perto do objeto e uma parte suave e fraca mais longe. Duas ou três camadas imitam isso muito melhor que um único desfoque grande:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elevation</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 24px 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; }
    .card { width: 140px; padding: 24px 10px; text-align: center; background: white; border-radius: 12px; font-size: 14px; }
    .one { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
    .layered {
      box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 8px rgb(0 0 0 / 8%),
        0 12px 24px rgb(0 0 0 / 8%);
    }
    .lift { transition: transform 0.2s, box-shadow 0.2s; }
    .lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 16px 32px rgb(0 0 0 / 14%);
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="card one">One heavy shadow</div>
    <div class="card layered">Three layers</div>
    <div class="card layered lift">Hover me</div>
  </div>
</body>
</html>

A primeira sombra da lista é pintada por cima. Mantenha as cores das sombras em preto semitransparente ou em um tom escuro do fundo, nunca cinza puro, para que escureçam o que estiver embaixo.

Sombras inset

inset desenha a sombra dentro da caixa do padding, como se a superfície estivesse afundada. Combina com campos de texto, áreas rebaixadas e botões pressionados:

input {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}

Uma sombra inset é desenhada acima do fundo, mas abaixo do conteúdo. Sombras que seguem o formato das letras em vez da caixa são text-shadow.

Erros comuns

Sombras pretas puras e totalmente opacas. Parecem um contorno escuro. Use alfa de 10% a 30%.
Um único desfoque enorme para dar profundidade. Combine uma sombra pequena e nítida com uma grande e suave.
Uma sombra cortada na borda. Um ancestral com overflow: hidden a recorta; acrescente padding ao ancestral ou mude a regra de overflow de lugar.
Desfoque negativo. É inválido e a declaração inteira é ignorada.
Animar box-shadow em muitos elementos. Isso repinta a cada quadro. Em páginas pesadas, anime a opacity de um pseudo-elemento que carrega a sombra maior.

Perguntas frequentes

Qual é a sintaxe do box-shadow?

box-shadow: offset-x offset-y blur spread color;, por exemplo box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Só os dois deslocamentos são obrigatórios; acrescente inset para desenhar a sombra dentro da caixa.

O que o spread faz no box-shadow?

Ele aumenta (positivo) ou diminui (negativo) a sombra antes do desfoque. Uma sombra sem deslocamento, sem desfoque e com spread de 3px é um anel sólido de 3px em volta do elemento.

Como colocar sombra só embaixo?

Desloque a sombra para baixo e encolha com um spread negativo para os lados sumirem: box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);.

O box-shadow afeta o layout?

Não. A sombra não ocupa espaço nem move outros elementos, e por isso é uma boa forma de criar um anel de foco ou um efeito de elevação no hover sem deslocar o layout. Ela pode ser cortada pelo overflow: hidden de um ancestral.

Dá para ter várias box-shadows?

Sim, separe-as com vírgulas. A primeira sombra é desenhada por cima. Combinar uma sombra pequena e nítida com uma grande e suave fica mais natural que uma única sombra grande.

Conceitos relacionados