Como usar
- Digite o seu texto em Texto de exemplo. A visualização o mostra com a sombra, para que você avalie o resultado com as suas próprias palavras.
- Defina o Deslocamento horizontal (px), o Deslocamento vertical (px) e o Desfoque (px) da primeira camada. Um deslocamento vertical positivo move a sombra para baixo.
- Escolha a Cor da sombra e a Opacidade de cada camada, e acrescente mais camadas com Adicionar uma camada para um brilho mais suave.
- Copie a declaração de CSS e cole-a na regra do seu texto.
Como o valor é montado
A propriedade text-shadow recebe uma sombra ou uma lista de sombras separadas por vírgula. Cada sombra tem os deslocamentos horizontal e vertical e um raio de desfoque, que pode ser omitido, e uma cor, que pode vir antes ou depois dos comprimentos. A especificação CSS Text Decoration traz a gramática. A primeira sombra é desenhada por cima das outras, e sem sombra o valor é none.
Uma sombra de texto não tem propagação (spread), ao contrário de uma sombra de caixa. O raio de desfoque nunca é negativo, e um desfoque maior espalha a sombra por uma área mais larga. A opacidade é escrita como o valor alfa de uma cor rgba, com no máximo duas casas decimais. Um comprimento zero não precisa de unidade, então a ferramenta escreve 0.
text-shadow: offset-x offset-y blur colour, offset-x offset-y blur colour, ...Camadas e o que o editor verifica
Um brilho suave costuma usar duas ou três camadas: uma sombra pequena e escura, perto das letras, e uma maior e mais clara, mais afastada. O editor aceita até 8 camadas, deslocamentos de −200 a 200 pixels, desfoque de 0 a 100 pixels e opacidade de 0 a 100 por cento.
As cores da visualização, a do texto e a do fundo, servem só para a visualização. Elas não fazem parte do CSS, então a declaração traz a sombra e mais nada.
Exemplo resolvido: uma sombra preta sob um brilho azul
A primeira camada tem deslocamento de 0 e 2 pixels, desfoque de 4 pixels e preto com opacidade de 30 por cento. A segunda não tem deslocamento, tem desfoque de 12 pixels e o azul #3b82f6 com 50 por cento.
O valor é 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5), e a declaração é text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5);
Perguntas frequentes
Qual é a diferença entre desfoque e uma segunda camada?
O desfoque suaviza a borda de uma sombra, que então some aos poucos em uma área mais larga. Uma segunda camada acrescenta outra sombra, com deslocamento, cor e opacidade próprios, que pode ficar em outro lugar em relação à primeira.
Por que os deslocamentos têm sinal?
Um deslocamento horizontal positivo move a sombra para a direita, e um negativo para a esquerda. Um deslocamento vertical positivo a move para baixo, então uma sombra que cai abaixo do texto tem valor positivo.
A sombra de texto pode ter propagação?
Não. A propriedade text-shadow recebe só deslocamento, desfoque e cor. A sombra de caixa tem propagação, mas o texto não, então o editor não oferece essa opção.
Por que a visualização parece diferente da minha página?
A visualização usa o texto de exemplo, o tamanho e as cores que você definiu aqui. Na sua página, a sombra cai na sua própria fonte, no seu tamanho e no seu fundo, então confira o resultado no lugar antes de terminar.
O que eu digito é guardado ou enviado para algum servidor?
Não. O texto de exemplo, a visualização e o CSS são feitos no seu navegador. Nada é guardado nem enviado ao nosso servidor, então copie a declaração antes de sair da página.
Fontes
Números e texto verificados pela última vez em terça-feira, 10 de novembro de 2026.