Gerador de text-shadow CSS: neon, 3D, sombra longa + Tailwind | We.Inc
Crie sombras de texto CSS em camadas com pré-visualização ao vivo. Comece com presets de neon, 3D, sombra longa, letterpress ou contorno e depois copie o CSS ou uma classe Tailwind.
Gerador de text-shadow CSS
A propriedade CSS text-shadow recebe um deslocamento x, um deslocamento y, um raio de desfoque opcional e uma cor, por exemplo text-shadow: 0 2px 6px rgb(0 0 0 / 0.25). Separe várias sombras com vírgulas para empilhá-las, que é como se fazem brilhos neon e letras 3D. Monte a sua abaixo e copie o CSS ou a classe Tailwind.
Os quatro valores de uma sombra
Valor
Exemplo
Efeito
deslocamento x
Move a sombra para a direita (negativo: esquerda)
deslocamento y
Move a sombra para baixo (negativo: cima)
raio de desfoque
Suaviza a borda; 0 gera uma cópia nítida
rgb(0 0 0 / 0.25)
Qualquer cor CSS; o padrão é a cor do texto
Empilhe quantas camadas quiser, mude o texto, o tamanho da fonte e as cores, e veja a pré-visualização se atualizar. O resultado é CSS puro que funciona em todos os navegadores atuais, mais uma classe Tailwind para projetos que usam o framework.
Escolha um preset ou comece com uma única sombra suave.
Edite os deslocamentos, o desfoque, a cor e a opacidade de cada camada, ou adicione e remova camadas. As camadas listadas primeiro ficam por cima.
Mude o texto de pré-visualização, o tamanho, o peso e as cores para combinar com o seu design.
Copie a declaração CSS ou a classe de propriedade arbitrária do Tailwind.
Sombras não contam nas verificações de contraste. Garanta que o texto passe contra o fundo sem a sombra e só depois adicione a sombra como acabamento.
Para texto branco sobre uma foto carregada, uma sombra escura e suave ajuda mais na leitura do que uma sombra dura. Combine com uma sobreposição escura na imagem para ter legibilidade de verdade.
Raios de desfoque grandes em muitas camadas custam tempo de pintura, e animá-los custa ainda mais. Deixe os brilhos pesados para títulos, não para o texto corrido.
Uma sombra clara de 1px abaixo de um texto cinza sobre fundo cinza dá o visual de letterpress, como se as letras estivessem prensadas; inverta o deslocamento para um texto em relevo.
Perguntas frequentes
Como fazer texto neon em CSS?
Use um texto claro com várias sombras da mesma cor viva, com deslocamento zero e desfoque crescente: um brilho branco bem próximo e depois brilhos de 12px, 24px e 48px na cor de destaque. Coloque sobre um fundo escuro. O preset Neon é um ponto de partida.
O text-shadow aceita spread como o box-shadow?
Não. O text-shadow não tem valor de spread nem a palavra-chave inset. Para simular um contorno mais grosso, empilhe várias sombras duras deslocadas um pixel em cada direção, como faz o preset Contorno, ou use -webkit-text-stroke.
Como adicionar sombra de texto no Tailwind?
O Tailwind 4.1 e versões posteriores incluem utilitários de text-shadow como text-shadow-sm e text-shadow-lg. Para uma sombra personalizada em qualquer versão, use uma propriedade arbitrária como [text-shadow:0_2px_6px_rgb(0_0_0/0.25)], em que os underscores representam espaços. O gerador escreve essa classe para você.
Por que minha sombra fica diferente no Safari?
Os navegadores rasterizam o desfoque de formas um pouco diferentes, então desfoques grandes podem parecer mais suaves ou mais fortes de um motor para outro. Sombras duras com desfoque zero ficam iguais em todos.
Como o empilhamento funciona
Cada sombra separada por vírgula é pintada atrás do texto, e a primeira da lista fica por cima das outras. Essa ordem importa nos efeitos 3D: coloque primeiro a camada mais próxima e mais clara e por último a mais distante e mais escura.
Sombras longas são apenas muitas camadas idênticas deslocadas um pixel de cada vez. Elas impressionam em um título grande, mas cada camada é mais uma pintura, então mantenha o número de passos moderado.
Acessibilidade e movimento
Sombras podem borrar textos pequenos e dificultar a leitura para pessoas com baixa visão. Reserve os efeitos decorativos para títulos grandes e mantenha o texto corrido nítido.
Se você animar um brilho, envolva a animação em uma verificação de prefers-reduced-motion para que quem pediu menos movimento veja uma versão estática.