CSS Text-Shadow Stack

text-shadow empilhado: neon, retrô e tipografia 3D

A propriedade text-shadow pinta uma sombra colorida atrás de cada glifo de um texto. A sintaxe é menor que a de box-shadow — apenas x, y, blur e cor (sem spread, sem inset) — mas aceita uma lista separada por vírgula, e é empilhando várias sombras que a mágica acontece. Uma sombra parece plana; quatro bem escolhidas simulam neon, aberração cromática, letterpress ou extrusão 3D completa.

.neon {
  color: #fff;
  text-shadow:
    0 0  5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px #0ff;
}

Receitas famosas

• Neon (Tron 1982) — 3-4 sombras da mesma cor saturada, offset zero, blur crescente. Combine com texto branco para o glow clássico.
• Aberração cromática 80s — uma sombra vermelha deslocada à esquerda, uma ciano deslocada à direita (-2px 0 #f0f, 2px 0 #0ff). Vende a estética VHS/synthwave.
• Letterpress — uma sombra clara acima (0 -1px 0 #fff) e uma escura abaixo (0 1px 0 #000) embute o texto na página.
• Extrusão 3D — repita o mesmo offset incrementalmente (1px 1px, 2px 2px, 3px 3px ...) para um efeito chunky de profundidade.
• Outline (fallback de text-stroke) — quatro sombras de 1px em cima, direita, baixo e esquerda simulam -webkit-text-stroke em navegadores antigos.

text-shadow vs filter: drop-shadow

Para texto especificamente, text-shadow é mais performante — é medido por glifo pelo rasterizador de texto, não pelo pipeline genérico de filter. filter: drop-shadow em um elemento de texto também funciona e segue a máscara alpha de cada caractere, mas dispara um passo extra de compositor e desativa o anti-aliasing sub-pixel no Chrome.

Long shadow, glitch e animação

A tendência "long shadow" do flat design (popularizada por volta de 2013) constrói uma sombra de 45° empilhando 100+ sombras de um pixel cada — só viável via mixin de preprocessador ou CSS gerado. O efeito "glitch" encadeia duas sombras coloridas e anima o offset em um keyframe rápido para simular ruído de sinal. Animar text-shadow é caro porque cada frame repinta o texto — prefira opacity ou transform quando possível.

Acessibilidade e contraste

Sombra não é booster de contraste. O WCAG mede a razão de contraste entre a cor do texto e a cor do fundo diretamente atrás dele — a sombra não conta. Se seu texto branco precisa de um fundo escuro para ser legível, pinte um background de verdade ou use um overlay semi-transparente; depender de um halo borrado vai falhar na auditoria. text-shadow animado com flicker de cores de alto contraste também pode causar crises — respeite prefers-reduced-motion.

Perguntas frequentes

Existe limite de sombras? A spec não impõe, mas cada sombra força outro paint pass por glifo. Acima de ~10 sombras em corpos grandes de texto espere quedas de FPS.

Por que text-shadow não tem spread? A spec foi mantida mínima. Se precisar de um halo mais grosso, aumente o blur ou empilhe sombras idênticas com pequenas variações de offset.

text-shadow funciona em font icons? Sim — Font Awesome, Material Icons e qualquer glifo renderizado via @font-face aceitam text-shadow. Para ícones SVG inline, use filter: drop-shadow().

Melhor stack para neon? 3-4 sombras com a mesma cor saturada, blur 5px, 10px, 20px e 40px, todas com offset zero. Combine com cor de texto branca ou muito clara.