CSS Glow Neon

Glow neon em CSS: imitando tubos de descarga gasosa com text-shadow

Um letreiro de neon real é um tubo de vidro selado preenchido com gás nobre — o neônio emite o icônico laranja-avermelhado em torno de 640 nm, argônio com vapor de mercúrio vira azul, hélio queima amarelo, criptônio fica esbranquiçado. Uma corrente elétrica excita o gás e cada átomo decai ao estado fundamental emitindo um fóton em um comprimento de onda específico. O resultado é um núcleo saturado de luz envolto em um halo mais suave onde os fótons espalham pelo vidro e pelo ar ao redor. Reproduzir isso em CSS se resume a um truque: empilhar várias camadas de text-shadow da mesma cor com raios de blur crescentes para o halo cair gradualmente para fora do glifo.

.neon {
  color: #fff;
  text-shadow:
    0 0 5px  #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 30px #ff00de,
    0 0 40px #ff00de;
}

A receita acima dá o visual de "núcleo quente + halo frio" que vende a ilusão: um glow branco brilhante interno (imitando o centro super-exposto de um tubo real) envolto em um halo externo saturado (a cor específica do gás). As duas sombras mais internas são quase brancas porque câmeras reais e olhos humanos clipam a parte mais brilhante de uma fonte saturada para branco.

Paletas clássicas de neon

• Rosa choque #ff00de — clichê Las Vegas/Shibuya em Tóquio.
• Ciano #00ffff — limpo, futurista, usado em letreiros "OPEN".
• Verde ácido #39ff14 — biohazard, terminal Matrix.
• Dupla vaporwave — rosa + ciano juntos, a paleta VHS dos anos 80 de Stranger Things e capas synthwave.
• Cyberpunk — magenta + azul elétrico sobre quase preto, popularizado por Cyberpunk 2077.

Fundo escuro é obrigatório. Um glow neon em uma página branca parece uma mancha suja — o contraste entre halo saturado e canvas quase preto é o que se lê como "luminoso". Se precisar suportar light mode, esconda o glow via @media (prefers-color-scheme: light).

A animação de flicker

Tubos reais de neon se desgastam e piscam — uma recriação fiel alterna opacidade entre cerca de 0.8 e 1.0 em intervalos erráticos. Use @keyframes com passos não uniformes e animation-timing-function: steps(1, end) para a mudança ser instantânea em vez de interpolada:

@keyframes flicker {
  0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; }
  20%, 22%, 79% { opacity: 0.85; }
}
.neon { animation: flicker 3s infinite; }

Embrulhe em @media (prefers-reduced-motion: no-preference) — flicker pode disparar crises fotossensíveis.

Outline neon e alternativa SVG

Para um visual de tubo vazio (só o contorno brilhando), combine -webkit-text-stroke: 1px #fff com color: transparent e a mesma pilha de text-shadow — o glifo fica oco mas continua emitindo o halo. Para formas complexas além de texto, um <filter> SVG encadeando <feGaussianBlur stdDeviation="4"/> com <feMerge> dá um bloom mais limpo e controlável do que sombras CSS empilhadas.

Perguntas frequentes

Como animar o flicker? Use @keyframes alternando opacidade (0.8 a 1.0) em percentuais irregulares com timing steps(1) — sem tween, só mudanças abruptas, como um reator falhando.

Sombras de cinco camadas matam a performance mobile? Cada sombra é um passo de paint. Cinco camadas em um título tudo bem; cinco camadas em centenas de itens de lista vão derrubar o frame rate de scroll. Teste em um Android low-end e reduza para três camadas se travar.

Neon é acessível para daltônicos? O alto contraste de luminância entre núcleo branco e canvas escuro ajuda — a maioria das deficiências de visão de cor ainda capta brilho. Evite neon só-vermelho ou só-verde para texto crítico; use ciano ou variantes com núcleo branco.

Por que meu neon parece chapado comparado às referências? Duas razões: poucas camadas (tente 5+) e ausência do par branco interno. Câmeras reais estouram o centro — sem esse destaque, o glow parece uma drop-shadow suave em vez de uma fonte auto-luminosa.