Gerador de Text Shadow CSS Online
A propriedade CSS text-shadow pode transformar um título comum em um elemento visual marcante — desde sombras sutis que melhoram a legibilidade até efeitos de neon e texto 3D. O Gerador de Text Shadow CSS oferece controle visual completo com preview em tempo real.
Parâmetros do text-shadow
- Offset X/Y: Deslocamento horizontal e vertical
- Blur radius: Suavidade das bordas
- Cor: Aceita HEX, RGB e RGBA (com transparência)
- Múltiplas camadas: Empilhe sombras para efeitos complexos
Efeitos especiais com text-shadow
Com múltiplas camadas de sombra, você pode criar:
- Efeito neon: sombras coloridas com blur alto
- Texto 3D: sombras em cascata com deslocamento crescente
- Contorno de texto: sombras em 4 direções sem blur
- Glow suave: sombra da mesma cor com blur grande e baixa opacidade
Boas práticas
Para texto corrido, prefira sombras muito sutis (1-2px offset, cor escura com baixa opacidade). Efeitos dramáticos ficam bem em títulos grandes e elementos héros, mas prejudicam a leitura em textos longos.
Experimente: Gerador de Text Shadow CSS
Perguntas Frequentes
Qual a diferença entre text-shadow e filter: drop-shadow?
text-shadow aplica diretamente ao texto; drop-shadow como filter inclui elementos pseudo-elementos e pode ser mais performático em alguns casos.
text-shadow funciona em ícones SVG inline?
Para SVG, use filter: drop-shadow() que segue o contorno do ícone com mais precisão.
Posso animar text-shadow?
Sim, mas é uma animação "cara" em termos de GPU. Prefira animar apenas a opacidade se o efeito puder ser simulado assim.