Gerador de Text-Shadow CSS
Gere valores de text-shadow visualmente. Defina deslocamento, desfoque e cor para cada sombra; adicione múltiplas sombras e copie o CSS instantaneamente.
Preview
Shadows
CSS
text-shadow: 0px 2px 4px #00000040; Predefinições
Índice
O que é text-shadow?
text-shadow é uma propriedade CSS que desenha uma ou mais sombras atrás do texto. Você define o deslocamento horizontal e vertical, o raio de desfoque e a cor. Ao contrário de box-shadow, text-shadow não tem dispersão ou interno — apenas deslocamento, desfoque e cor. Múltiplas sombras são separadas por vírgulas.
Sintaxe
text-shadow: offset-x offset-y blur-radius color; Múltiplas sombras: text-shadow: shadow1, shadow2, ...; Deslocamentos e desfoque estão em px. A cor pode ser hex, rgb ou rgba; use transparência para sombras mais suaves.
Casos de uso
- Títulos e cabeçalhos — Sombra suave para profundidade ou legibilidade em fundos ocupados.
- Efeito de contorno — Pequeno deslocamento sem desfoque para sugerir um contorno.
- Brilho — Deslocamento zero com grande desfoque e cor semitransparente.
- Profundidade em camadas — Múltiplas sombras para uma sombra mais realista.
Perguntas frequentes
text-shadow aplica-se apenas ao texto e não tem dispersão ou interno — apenas offset-x, offset-y, blur e color. box-shadow aplica-se à caixa do elemento e suporta dispersão e interno.
Sim. Adicione mais sombras com "Adicionar sombra". Elas se empilham em ordem; a primeira fica no topo. Use múltiplas sombras para profundidade em camadas.