CSS Box Shadow: Guia Completo com Exemplos

Domine a sintaxe box-shadow, camadas múltiplas, sombras internas e sistemas de elevação para design UI moderno.

6 min de leitura CSS · Design · UI 6 seções + FAQ

Sombras box são uma das propriedades CSS mais versáteis. Uma sombra bem elaborada pode fazer qualquer elemento parecer ancorado, elevado ou interativo.

A sintaxe box-shadow é enganosamente simples, mas as possibilidades de design são vastas. Sobrepor múltiplas sombras cria profundidade mais realista.

Sintaxe box-shadow

A sintaxe completa box-shadow é: box-shadow: offset-x offset-y blur-radius spread-radius color. Todos os valores exceto offset-x e offset-y são opcionais. Múltiplas sombras são separadas por vírgulas.

Ferramenta gratuita Gerador de Box Shadow Crie sombras box CSS complexas com pré-visualização ao vivo

Offset X/Y, desfoque, expansão, cor

Offset-X é a distância horizontal. Offset-Y é a distância vertical. Blur-radius controla a suavidade. Spread-radius expande ou contrai a sombra.

Sombras múltiplas e camadas

Sobrepor múltiplos valores box-shadow cria efeitos de profundidade mais realistas. Uma técnica comum: combinar uma pequena sombra ambiente nítida com uma sombra-chave maior e suave.

Ferramenta gratuita Gerador de Filtros CSS Aplique desfoque, brilho, contraste e mais com filtros CSS

Sombras internas

A palavra-chave inset inverte a direção da sombra — aparece dentro do elemento em vez de fora. Sombras internas são usadas para: estados de botão pressionado, biseis internos, anéis de foco.

Sistemas de elevação

Material Design 3 define níveis de elevação de 0 a 5 usando valores box-shadow. Cada nível corresponde a um caso de uso: 0 para superfícies planas, 1 para cartões.

Técnica neumorphism

O neumorphism usa dois box-shadows no mesmo elemento: uma sombra clara no canto superior esquerdo e uma escura no canto inferior direito. O elemento parece extrudir do fundo.

Ferramenta gratuita Gerador de Glassmorphism Crie efeitos UI de vidro fosco com CSS backdrop-filter

Perguntas frequentes

Qual é a diferença entre box-shadow e filter: drop-shadow? +
box-shadow segue a forma retangular do elemento. filter: drop-shadow segue a forma visível real incluindo partes transparentes de imagens.
Como criar uma sombra sem offset? +
Defina tanto offset-x quanto offset-y como 0. Uma sombra centralizada sem offset parece um efeito de brilho.
Quais cores devo usar para sombras? +
Evite preto puro. Use uma versão muito escura da sua cor de fundo ou uma cor escura dessaturada.
Como animar box-shadow? +
box-shadow é animável com CSS transition. Para performance, prefira animar a opacity em um pseudo-elemento.
Posso usar múltiplos valores box-shadow? +
Sim. Separe múltiplos valores de sombra com vírgulas. A primeira sombra é renderizada no topo.
O que é spread-radius no box-shadow? +
Spread-radius expande (valor positivo) ou contrai (valor negativo) a sombra em todas as direções.
Como criar uma sombra interna? +
Adicione a palavra-chave inset antes dos valores de offset: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1).