Propriedade text-shadow
Última atualização: 2026-09-13
text-shadow Propriedade text-shadow
A propriedade text-shadow do CSS adiciona sombras ao texto para dar profundidade e hierarquia visual contra o fundo. Cada sombra tem um deslocamento horizontal, deslocamento vertical, raio de desfoque e cor; várias sombras podem ser empilhadas, separadas por vírgulas, para criar efeitos de brilho, relevo ou contorno.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | shadow |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
text-shadow: none | <shadow>#;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem sombra de texto |
<shadow> | Tipo | Deslocamento horizontal, deslocamento vertical, raio de desfoque, cor |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-shadow | ✓ v10 | ✓ v12 | ✓ v3.5 | ✓ v1.1 | ✓ v9.5 |
| Suportado em todos os principais navegadores | |||||
Dica： Definir o raio de desfoque como 0 com um deslocamento de 1px pode imitar um contorno, mas para contornos de texto reais prefira -webkit-text-stroke.
Aviso： Sombras em excesso ou um grande raio de desfoque podem prejudicar a legibilidade; use-as com moderação e mantenha contraste suficiente com o fundo.
❓ Perguntas Frequentes
QQual é a diferença entre text-shadow e box-shadow no CSS?
Atext-shadow aplica-se aos próprios glifos e segue o formato do texto; box-shadow aplica-se a toda a caixa do elemento e produz uma sombra retangular. text-shadow não tem raio de espalhamento e não suporta a palavra-chave inset para sombras internas.
QPosso adicionar várias sombras com a propriedade text-shadow em uma única declaração?
ASim. Separe várias sombras com vírgulas, e as anteriores são renderizadas por cima. Os argumentos de cada sombra são deslocamento horizontal, deslocamento vertical, raio de desfoque e cor. Empilhar sombras é como se constroem efeitos de brilho neon e texto 3D.
QComo crio um efeito de contorno de texto com text-shadow no CSS?
AUse quatro sombras de 1px nas direções cardeais: text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000. Uma abordagem mais limpa é -webkit-text-stroke: 1px #000.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
