Neste artigo
O que CSS Text Shadow faz
A propriedade CSS text-shadow adiciona efeitos de sombra aos caracteres de texto. Cada sombra é definida por deslocamento horizontal, deslocamento vertical, raio de desfoque e cor. Diferente de box-shadow, text-shadow segue a forma exata de cada glifo de caractere, criando efeitos que envolvem as formas das letras.
Você pode empilhar múltiplas sombras em um único elemento separando-as com vírgulas. Isso permite efeitos complexos como brilhos neon, letras em relevo, extrusões 3D e texto de fogo — tudo com CSS puro, sem imagens ou canvas necessários.
Usando o gerador de sombra de texto
O gerador fornece controles intuitivos para criar sombras de texto sem memorizar a sintaxe CSS. Você pode ajustar cada parâmetro em tempo real e ver o resultado instantaneamente.
- Controles de deslocamento — arraste os controles deslizantes ou insira valores exatos em pixels para o deslocamento horizontal (X) e vertical (Y) para posicionar a sombra em relação ao texto
- Raio de desfoque — aumente o desfoque para efeitos suaves e brilhantes ou mantenha em zero para sombras nítidas que parecem duplicatas sólidas
- Camadas múltiplas — adicione várias camadas de sombra e reordene-as para criar efeitos compostos complexos como contornos, brilhos e profundidade
Experimente gratuitamente — sem cadastro
Gerar CSS Text Shadow →Efeitos de texto criativos com text shadow
Sombras de texto não são apenas para efeitos sutis de profundidade. Combinando múltiplas camadas de sombra com diferentes deslocamentos, valores de desfoque e cores, você pode criar efeitos visuais impressionantes inteiramente em CSS.
- Brilho neon — use deslocamento zero com grande raio de desfoque e uma cor brilhante (ciano, magenta, lima) repetida em múltiplas camadas com desfoque crescente para simular um brilho de tubo neon
- Relevo e letterpress — combine uma sombra clara ligeiramente deslocada para baixo-direita com uma sombra escura ligeiramente deslocada para cima-esquerda em fundo cinza médio para um efeito de prensagem em metal
- Extrusão 3D — empilhe muitas sombras com deslocamentos incrementais (1px 1px, 2px 2px, 3px 3px...) em cores gradualmente mais escuras para um efeito de texto tridimensional sólido
Perguntas frequentes
Text-shadow afeta a performance?
Sombras simples têm impacto desprezível na performance. No entanto, empilhar muitas sombras com grandes raios de desfoque pode causar lentidão de renderização, especialmente em dispositivos móveis. Teste efeitos complexos nos dispositivos alvo.
Quais navegadores suportam text-shadow?
Text-shadow tem excelente suporte em todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e navegadores móveis. É suportado desde o IE10 e pode ser usado com segurança sem fallbacks.
Text-shadow pode ser animado com transições CSS?
Sim. Text-shadow é completamente animável com transições CSS e animações keyframe. Você pode fazer transições suaves entre diferentes estados de sombra para efeitos hover e animações.