CSS Box Shadow: Guia Completo com Exemplos

Entendendo o Box Shadow

A propriedade CSS box-shadow adiciona efeitos de sombra ao redor do quadro de um elemento. E um dos efeitos visuais mais utilizados na web, aparecendo em layouts de cards, botoes, modais e barras de navegacao em milhoes de sites.

Uma unica declaracao de box-shadow pode transformar um design plano em algo que parece ter camadas e profundidade. Sombras criam profundidade, guiam o olhar do usuario e estabelecem hierarquia visual sem adicionar markup extra.

A propriedade e suportada por todos os navegadores principais desde 2011 — sem necessidade de prefixos. Funciona em qualquer elemento block-level ou inline-block e pode ser combinada com border-radius para efeitos de sombra arredondada.

Detalhes da Sintaxe

A sintaxe completa do box-shadow e:

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] cor;

• offset-x: Distancia horizontal. Valores positivos empurram a sombra para a direita, negativos para a esquerda.
• offset-y: Distancia vertical. Valores positivos empurram para baixo, negativos para cima.
• blur-radius: Opcional. Quanto maior o valor, mais suave e espalhada a sombra. Padrao e 0 (borda nitida).
• spread-radius: Opcional. Valores positivos expandem a sombra, negativos a encolhem. Padrao e 0.
• cor: Qualquer cor CSS valida. Usar rgba() ou hsla() com transparencia e a abordagem mais comum para sombras naturais.
• inset: Palavra-chave opcional que faz a sombra aparecer dentro do elemento em vez de fora.

Exemplo: box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15); cria uma sombra sutil deslocada 4px para a direita e 6px para baixo com 12px de desfoque.

Padroes Comuns de Sombra

Material Design Elevation

O Material Design do Google usa sombras em camadas para indicar niveis de elevacao. Um card na elevacao 1 tem uma sombra suave e proxima, enquanto um modal na elevacao 5 tem uma sombra maior e mais difusa.

Sombra Sutil de Card

O padrao mais popular para cards de conteudo: uma sombra quase invisivel que levanta o card do fundo.

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

Efeito de Botao Pressionado

Combine box-shadow com :active para simular o pressionar fisico de um botao:

.btn { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn:active { box-shadow: 0 1px 2px rgba(0,0,0,0.1); transform: translateY(2px); }

Neumorfismo

O estilo neumorfico usa duas sombras — uma clara e uma escura — para criar uma aparencia suave e elevada:

box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff;

Multiplas Sombras

Voce pode empilhar multiplas sombras separando-as por virgulas. A primeira sombra listada e renderizada no topo. Sombras em camadas parecem muito mais realistas do que uma unica sombra porque a luz real cria sombras ambientes suaves junto com sombras diretas mais nitidas.

box-shadow:
0 1px 1px rgba(0,0,0,0.08),
0 2px 2px rgba(0,0,0,0.06),
0 4px 4px rgba(0,0,0,0.04),
0 8px 8px rgba(0,0,0,0.02);

Sombras Internas (Inset)

Adicionar a palavra-chave inset inverte a sombra para o interior do elemento. Comumente usado para campos de entrada, botoes pressionados e reentrancicas de containers.

Uma tecnica popular para campos de texto combina uma sombra inset sutil com um contorno colorido no foco:

input:focus {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 0 3px rgba(59,130,246,0.3);
outline: none;
}

Dicas de Performance

• Nao anime box-shadow diretamente. Use um pseudo-elemento com a sombra alvo e anime sua opacidade.
• Mantenha o blur-radius razoavel. Valores abaixo de 30px geralmente nao causam problemas.
• Use will-change com moderacao.
• Considere drop-shadow para formas irregulares. filter: drop-shadow() segue o canal alfa.

Gere CSS de sombra pronto para producao com nosso Gerador de Box Shadow. Ajuste offsets, blur, spread e cor visualmente e copie o codigo.