Gerador de Text Shadow
O gerador de text-shadow CSS define deslocamento, desfoque, cor e opacidade da sombra com prévia ao vivo e permite empilhar várias camadas de sombra para efeitos de brilho, contorno e texto 3D.
Sobre esta ferramenta
O gerador de text-shadow CSS define deslocamento, desfoque, cor e opacidade da sombra com prévia ao vivo e permite empilhar várias camadas de sombra para efeitos de brilho, contorno e texto 3D.
Como usar
- Ajuste o deslocamento horizontal e vertical e o desfoque.
- Escolha a cor e a opacidade da sombra, além da cor e do tamanho do texto.
- Clique em Adicionar camada para empilhar outra sombra; Redefinir camadas recomeça do zero.
- Clique em Copiar CSS.
Bom saber
- A sintaxe de text-shadow é: offset-x offset-y blur-radius color.
- Diferente de box-shadow, text-shadow não tem valor de spread nem a palavra-chave inset.
- Várias sombras são separadas por vírgulas e pintadas com a primeira por cima.
- Uma sombra sem deslocamento e com desfoque cria um efeito de brilho.
- Empilhar vários deslocamentos de 1 px cria um visual 3D ou de letterpress.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
Como adicionar sombra ao texto em CSS?
Use text-shadow, por exemplo text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
Como fazer texto brilhante?
Use deslocamentos zero com desfoque e uma cor viva, por exemplo text-shadow: 0 0 8px #1db954; empilhe camadas para um brilho mais forte.
Posso usar mais de uma sombra de texto?
Sim. Separe as sombras com vírgulas; esta ferramenta adiciona cada camada para você.
O text-shadow afeta a legibilidade?
Sombras sutis podem melhorar a legibilidade sobre imagens, mas sombras pesadas reduzem a nitidez; confira o contraste com um verificador de contraste.