Gerador de texto com efeito neon em CSS

Esta ferramenta cria texto luminoso no estilo de letreiro neon usando text-shadow do CSS. À esquerda você digita o texto do letreiro e ajusta o tamanho da fonte (20 a 100 px), a intensidade do brilho (raio de 2 a 30 px), a cor do brilho e o estilo da tipografia (Monospace, Sans-serif, Serif ou Cursive). A prévia é atualizada na hora e o CSS aparece logo abaixo, pronto para copiar. A configuração inicial rosa gera .neon-text { color: #ffffff; font-family: sans-serif; font-size: 48px; text-shadow: 0 0 4px #fff, 0 0 10px #ff007f, 0 0 20px #ff007f; } mais uma animação de pulsação.

O efeito usa três camadas de text-shadow. A primeira é um brilho branco de 4 px que imita o núcleo claro do tubo. A segunda usa a cor escolhida com o raio como desfoque, e a terceira repete a cor com o dobro do desfoque, formando o halo externo. O texto em si fica branco, porque o centro de um tubo neon real parece quase branco e a cor vem principalmente do brilho ao redor. Um raio maior deixa o halo mais suave e amplo, mas em textos pequenos tudo fica borrado; diminua o raio junto com a fonte.

Com o efeito de pulsação luminosa ativado, o CSS ganha uma regra @keyframes neon-pulse: no meio da animação o brilho cai pela metade e a opacidade vai para 0,85, e o ciclo vai e volta com alternate e ease-in-out, como se o letreiro respirasse. A velocidade vai de 0,5 a 4 segundos; quanto menor o número, mais rápido pisca. Os quatro temas predefinidos (Cyberpunk, Aurora Boreal, Oceano Profundo sem pulsação e Pôr do Sol Retrô) aplicam cor, raio, tamanho e animação com um clique.

O neon fica melhor sobre fundos escuros; no branco o halo praticamente some. Mantenha a pulsação lenta, já que piscadas rápidas incomodam algumas pessoas, e considere desligá-la com a media query prefers-reduced-motion. text-shadow é CSS puro, sem imagens nem JavaScript, e funciona em todos os navegadores modernos. A classe copiada se chama .neon-text; renomeie e aplique em um título ou botão.