Como adicionar sombras em elementos e textos com box-shadow e text-shadow

O CSS oferece duas propriedades para adicionar sombras: box-shadow para elementos e text-shadow para textos.

box-shadow

A propriedade box-shadow adiciona uma sombra ao redor de um elemento. Ela aceita até cinco valores.

Carregando...

Exemplo básico:

Carregando...

• 2px: sombra deslocada 2px para a direita;
• 4px: sombra deslocada 4px para baixo;
• 8px: nível de desfoque da sombra;
• rgba(0, 0, 0, 0.15): cor preta com 15% de opacidade.

Valores negativos no deslocamento movem a sombra para a esquerda e para cima:

Carregando...

Sombra interna

Adicionando a palavra inset, a sombra aparece por dentro do elemento.

Carregando...

Múltiplas sombras

Você pode empilhar várias sombras separando com vírgula.

Carregando...

Camadas múltiplas criam efeitos de profundidade mais naturais.

text-shadow

A propriedade text-shadow adiciona sombra ao texto. A sintaxe é mais simples: deslocamento-x, deslocamento-y, desfoque e cor.

Carregando...

Também aceita múltiplas sombras separadas por vírgula, o que permite criar efeitos como brilho ou contorno:

Carregando...