Categoria: Desenvolvimento
Gerador de Text Shadow CSS
Empilhe múltiplos text-shadow e copie o CSS
Defina deslocamento, desfoque, cor e opacidade, e receba uma declaração text-shadow em múltiplas camadas construída a partir dessa base, com prévia ao vivo e um botão para copiar o CSS finalizado.
Prévia da sombra
text-shadow: 1px 1px 2px rgba(23, 33, 28, 0.5), 1px 1px 4px rgba(23, 33, 28, 0.39), 2px 2px 6px rgba(23, 33, 28, 0.28);
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
Um único text-shadow parece um contorno plano e de bordas duras, enquanto um brilho suave ou um efeito de sombra empilhada precisa de várias camadas que diminuem em deslocamento e desfoque enquanto desaparecem em opacidade. Esta ferramenta deriva toda essa pilha a partir do deslocamento, desfoque, cor e opacidade base que você define, a mesma técnica de camadas usada pelo gerador de camadas de box-shadow, então você só precisa pensar em uma sombra em vez de escrever várias à mão, separadas por vírgula.
Como usar
- Defina quantas camadas gerar e o deslocamento e desfoque base.
- Escolha uma cor e opacidade.
- Confira a prévia ao vivo e copie a declaração text-shadow.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Por que adicionar camadas deixa a sombra mais suave?
- Cada camada extra encolhe em direção ao texto enquanto desaparece em opacidade, então as camadas juntas parecem um gradiente suave de sombra em vez de uma única cópia de bordas duras.
- Algo é enviado a um servidor?
- Não. A declaração é calculada na página a partir dos valores que você define, por isso a prévia se atualiza na hora.
- Posso usar isso para um efeito neon ou de brilho?
- Sim. Uma cor clara com desfoque grande e várias camadas parece um brilho; uma cor escura com deslocamentos pequenos e desfoque baixo parece uma sombra de profundidade sutil.