Sombras: box-shadow e text-shadow

Sombras dão profundidade à página - a sensação de que um elemento está flutuando acima do fundo, ou de que o texto está "subindo" do papel. São duas propriedades distintas, com sintaxes parecidas.

box-shadow: sombra em volta da caixa

.cartao {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

A sintaxe é:

box-shadow: <offset-x> <offset-y> <blur> <spread> <cor>

• offset-x: quanto a sombra desliza no eixo X (horizontal). Positivo vai pra direita, negativo pra esquerda.
• offset-y: quanto desliza no Y (vertical). Positivo pra baixo.
• blur: o quanto a sombra é "borrada" - maior o valor, mais suave e espalhada. 0 é uma sombra dura, com a forma exata da caixa.
• spread (opcional): quanto a sombra cresce além da caixa. Positivo "engorda", negativo "encolhe".
• cor: a cor da sombra. RGBA com alfa baixo é o padrão para sombras realistas.

Exemplos:

/* Sombra sutil pra card - clássica */
.card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

/* Sombra mais forte pra botão hover */
.botao:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }

/* Sombra projetada pra baixo (mais natural) */
.destaque { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }

/* Sombra "afundada" - input, textarea */
.input:focus { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }

/* Múltiplas sombras (somar separando por vírgula) */
.botao-elegante {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
}

O inset no início da regra muda a sombra de "externa" pra "interna"

• parece que a luz está vindo de dentro. Ótimo para inputs, campos de busca, estados "pressionado".

text-shadow: sombra em volta do texto

.titulo-hero {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

Mesma ideia do box-shadow, mas aplicado ao texto. Sintaxe mais simples (sem spread):

text-shadow: <offset-x> <offset-y> <blur> <cor>

Casos de uso:

/* Texto branco em cima de foto - legibilidade */
.hero h1 {
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* Efeito "neon" */
.neon {
  color: white;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #1a73e8,
    0 0 20px #1a73e8;
}

/* Efeito "em relevo" (raised) */
.relevo {
  color: #ccc;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #555;
}

Performance de sombras

Sombras são "caras" para o navegador renderizar, especialmente:

• Sombras grandes e muito borradas (blur alto).
• Muitas sombras (somar 5-6 com vírgula em cards animados).

Se a página fica lenta em celular velho, olhe primeiro pra sombras. Alternativa moderna: filter: drop-shadow() (mais lento ainda, mas faz sombra respeitando formas não-retangulares - útil em PNGs e SVGs transparentes).

filter: drop-shadow() - sombra "verdadeira"

.icone {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

A diferença: box-shadow é a sombra do retângulo do elemento. drop-shadow é a sombra do pixel real visível - o que importa quando o elemento é uma imagem com fundo transparente ou um SVG complexo.

"Material Design" e elevação - quanto maior a elevação, mais forte a sombra

Esse é um atalho mental útil. Sites com design system (Material, Apple HIG, Fluent) costumam definir níveis de elevação, cada um com sua sombra:

:root {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.10), 0 8px 16px rgba(0, 0, 0, 0.14);
  --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.14), 0 16px 32px rgba(0, 0, 0, 0.18);
}

• box-shadow: sombra da caixa retangular. Padrão para cards, botões, dropdowns.
• text-shadow: sombra do texto. Use para legibilidade em cima de imagens.
• inset: sombra interna (parece afundado).
• Múltiplas sombras se separam por vírgula, primeira na frente.
• filter: drop-shadow(): sombra do pixel visível, bom para imagens e SVGs com fundo transparente.

Dica: teste sua sombra em diferentes fundos. Sombra preta RGBA com fundo branco fica ótima; com fundo cinza escuro, some. Se o design precisa funcionar em vários fundos, use sombras coloridas com a cor primária da marca, ou ajuste a opacidade por contexto.

No próximo nó, vamos fazer a sombra aparecer suavemente - é hora das transições.