Gerador de Sombra de Texto CSS com Prévia ao Vivo
Este gerador de sombra de texto monta a propriedade CSS text-shadow de forma visual, para que você desenhe a sombra com controles deslizantes e um seletor de cor em vez de adivinhar os valores na mão. Ajuste deslocamento, desfoque, cor e opacidade e veja a prévia ao vivo atualizar na hora enquanto trabalha.
Ele foi feito para desenvolvedores front-end e designers que querem uma sombra discreta para melhorar a leitura, um brilho neon, um visual 3D em camadas ou um contorno de texto bem limpo. Empilhe quantas camadas de sombra quiser, comece por uma predefinição pronta e copie o CSS pronto para produção com um clique.
Como Usar o Gerador de Sombra de Texto
Ajuste os controles da sombra
Cada camada tem cinco controles: Deslocamento X (-50 a 50px), Deslocamento Y (-50 a 50px), Desfoque (0 a 100px), Cor pelo seletor ou hex e Opacidade (0% a 100%). Arraste os controles e a prévia responde em tempo real.
Adicione mais camadas
Clique em Adicionar camada para empilhar sombras extras e criar efeitos como brilho neon ou fogo. Use o ícone de olho para ativar ou desativar uma camada e o ícone de remover para apagá-la.
Experimente uma predefinição
Escolha qualquer uma das oito predefinições — Suave, Brilho neon, Retrô 3D, Relevo, Contorno, Sombra longa, Fogo ou Vintage — para carregar um efeito pronto e depois faça o ajuste fino com os controles.
Personalize a prévia
Clique no texto da prévia para digitar suas próprias palavras e depois defina o tamanho da fonte (24 a 120px), a cor do texto, a cor de fundo e a família da fonte (sans-serif, serif, monospace ou cursive) para combinar com o seu design.
Copie o CSS
A propriedade text-shadow gerada aparece em um bloco de código. Clique em Copiar para enviá-la à área de transferência e cole direto na sua folha de estilos.
Recursos
Sombras em Várias Camadas
Empilhe quantas camadas de sombra precisar, cada uma com seu próprio deslocamento, desfoque, cor e opacidade. Ative ou desative camadas individuais para comparar sem perder os ajustes.
Controles Visuais
Controles deslizantes precisos para deslocamento X/Y, desfoque e opacidade, além de um seletor de cor com campo hex para combinar cores com exatidão.
Prévia ao Vivo
Cada mudança é renderizada na hora em um texto de prévia editável, então você vê o resultado real antes de copiar uma única linha de código.
8 Predefinições Prontas
Comece por Suave, Brilho neon, Retrô 3D, Relevo, Contorno, Sombra longa, Fogo ou Vintage e depois personalize cada uma do seu jeito.
Prévia Personalizável
Edite o texto, defina o tamanho da fonte de 24 a 120px, mude as cores do texto e do fundo e alterne entre as fontes sans-serif, serif, monospace e cursive.
Exportação de Código com Um Clique
O CSS de text-shadow limpo e separado por vírgulas fica pronto em um bloco de código — copie para a área de transferência com um único clique.
Redefinir para o Padrão
Limpe todas as camadas e ajustes da prévia, voltando a uma única sombra padrão sempre que quiser recomeçar do zero.
Roda Inteiramente no Navegador
Sem contas, sem envios, sem rastreamento. Tudo acontece localmente, então seu texto e seus estilos ficam no seu dispositivo.
Perguntas Frequentes
Como adiciono uma sombra de texto no CSS?
Aplique a propriedade text-shadow a um elemento de texto. Cada sombra é escrita como offset-x offset-y blur-radius color, por exemplo text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);. Com este gerador você define esses valores nos controles deslizantes e copia a propriedade pronta direto para o seu CSS.
O que significam os valores do text-shadow?
O primeiro valor é o deslocamento horizontal, o segundo é o deslocamento vertical, o terceiro é o raio de desfoque (o quão suave a sombra parece) e o último é a cor. Deslocamentos maiores afastam a sombra do texto; um desfoque mais alto a espalha e suaviza. Nesta ferramenta, a opacidade é incorporada à cor como o valor alfa de rgba().
Como adiciono várias sombras de texto?
A propriedade CSS text-shadow aceita várias sombras separadas por vírgulas. Clique em Adicionar camada para empilhar quantas quiser — não há limite fixo. Efeitos simples usam uma ou duas camadas, enquanto um brilho neon costuma usar três ou quatro camadas sobrepostas.
Como crio um efeito de brilho ou texto neon?
Carregue a predefinição Brilho neon como ponto de partida. Ela empilha várias camadas com deslocamento zero e desfoque crescente na mesma cor viva, o que cria o halo suave de um brilho. Mude a prévia para um fundo escuro e depois ajuste a cor e o desfoque para aumentar ou diminuir a intensidade.
Como faço texto 3D ou com contorno usando text-shadow?
Para um visual 3D, use a predefinição Retrô 3D ou Sombra longa, que empilham camadas com deslocamento e desfoque zero para criar uma sensação de profundidade. Para um contorno, use a predefinição Contorno: ela posiciona quatro sombras — esquerda, direita, cima e baixo — cada uma com desfoque zero para traçar a borda de cada letra. Aumente os valores de deslocamento para um contorno mais grosso.
Qual é a diferença entre text-shadow e box-shadow?
O text-shadow aplica a sombra aos glifos do próprio texto, então ela segue o formato de cada letra. O box-shadow aplica a sombra à caixa retangular do elemento. Use este gerador para efeitos de tipografia; use uma ferramenta de box-shadow quando quiser uma sombra em volta de um cartão ou botão.
Por que minha sombra fica diferente em tamanhos de fonte diferentes?
Os valores da sombra são em pixels, que são unidades absolutas, então uma sombra de 4px parece proporcionalmente maior em um texto de 24px do que em um de 120px. Use o controle de tamanho da fonte para ver sua sombra no tamanho que você realmente vai usar e ajuste o deslocamento e o desfoque para combinar.
Ainda não há comentários. Seja o primeiro a comentar!