CodeKitHubO que é esta ferramenta?
Esta ferramenta sobrepõe vários valores de text-shadow desfocados na cor de brilho escolhida, com raios de desfoque crescentes, para recriar o brilho suave de um letreiro de néon.
Ajuste o cursor de intensidade para controlar quantas camadas de brilho são sobrepostas, de um brilho subtil a um efeito forte e intenso.
Uma pré-visualização em tempo real sobre um fundo escuro atualiza-se instantaneamente à medida que digita ou ajusta qualquer definição, para poder afinar o brilho antes de copiar o CSS.
Por que usar?
- Você está criando uma landing page para uma balada ou evento de bar, e um título com cor lisa não transmite o clima — um brilho néon no título comunica "vida noturna" no instante em que a página carrega, antes de o visitante ler qualquer texto.
- Está montando um portfólio com estética synthwave ou cyberpunk e precisa que o texto principal realmente pareça brilhar, não só parecer texto rosa num fundo escuro — o text-shadow em camadas é o que vende a ilusão.
- Está criando um selo estilo "OPEN" ou "WELCOME" para uma vitrine virtual e quer que pareça um letreiro de néon de verdade, não um ícone SVG chapado, já que as camadas de brilho respondem a CSS real, não a uma imagem estática.
- Quer comparar um brilho discreto e apertado com um efeito estourado no máximo antes de decidir qual combina com sua marca — mover o controle de intensidade mostra os dois sem escrever os valores de sombra na mão.
- 100% local: o CSS é gerado inteiramente no seu navegador, sem que nada seja enviado para um servidor.
Como usar
- Digite o texto que quer que brilhe.
- Escolha uma cor de brilho e uma cor de fundo que combinem com o seu design.
- Ajuste o cursor de intensidade para controlar a força do efeito de brilho.
- Clique em «Copiar» para copiar o código CSS gerado e cole-o na sua folha de estilos.
Exemplo
Entrada
Texto: "NEON", Cor do Brilho: rosa, Intensidade: 3Resultado
color: #ffffff;
background: #0a0a12;
text-shadow: 0 0 2px #ff2ec4, 0 0 4px #ff2ec4, 0 0 8px #ff2ec4, 0 0 16px #ff2ec4;O CSS gerado define texto branco sobre um fundo escuro com várias camadas de text-shadow desfocadas e sobrepostas na cor de brilho escolhida.
Como funciona o efeito de brilho néon
O brilho é construído a partir de várias camadas de text-shadow na mesma cor, cada uma com um raio de desfoque maior do que a anterior.
| Camada | Raio de Desfoque | Efeito |
|---|---|---|
| 1.ª | 2px | Brilho interior apertado, próximo das letras |
| 2.ª | 4px | Brilho ligeiramente mais amplo |
| 3.ª | 8px | Brilho suave de alcance médio |
| 4.ª | 16px | Brilho exterior amplo |
| 5.ª | 24px | Brilho ambiente extenso na intensidade máxima |
Ferramentas relacionadas
Para mais geradores de efeitos de texto CSS, experimente estes.
→ Gerador de Texto em Relevo CSS · Gerador de Box Shadow · Gerador de Glassmorphism CSS
Escolhendo a cor de brilho certa para cada clima
- Brilhos rosa e magenta soam como retrô clássico dos anos 80 ou synthwave — a escolha mais comum para designs de vida noturna e temática arcade.
- Brilhos ciano e azul tendem a um clima mais futurista ou tecnológico, comuns em mockups de UI cyberpunk e de ficção científica.
- Brilhos verdes evocam uma estética de hacker ou terminal, especialmente combinados com uma fonte monoespaçada.
- Brilhos âmbar ou laranja quentes ficam mais perto de um letreiro de néon de bar tradicional do que as cores mais frias do synthwave, úteis para branding de restaurante ou bar que busca um clima vintage em vez de futurista.
Perguntas frequentes
Porque é que o texto precisa de ser branco para o brilho ficar bem?
Os brilhos de néon funcionam melhor com uma cor de texto clara, quase branca, já que o brilho colorido vem inteiramente das camadas de text-shadow — uma cor de texto escura ou saturada competiria com o brilho em vez de o deixar destacar-se.
Porque é que o efeito precisa de um fundo escuro?
Tal como nos letreiros de néon reais, o efeito de brilho é muito mais visível contra um fundo escuro. Num fundo claro, o brilho tende a esbater-se e a tornar-se difícil de ver.
O que é que o cursor de intensidade realmente altera?
Controla quantas camadas de text-shadow desfocadas são sobrepostas, desde um único brilho apertado em intensidade baixa até cinco brilhos em camadas com uma dispersão mais ampla na intensidade máxima.
Esta ferramenta guarda ou regista o que eu digito?
Não. O CSS é gerado inteiramente no seu navegador — nada é enviado ou armazenado num servidor.
Isto funciona em todos os navegadores?
Sim — o text-shadow com vários valores separados por vírgula tem excelente suporte em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge.
Posso animar o brilho para piscar como um letreiro de néon de verdade?
O CSS gerado é um brilho estático, mas você pode estendê-lo com uma animação CSS @keyframes que alterna a opacidade ou intensidade do text-shadow entre dois estados — a ferramenta te dá os valores de brilho base para animar a partir deles.
O brilho ainda fica bom num fundo claro ou branco?
Não — o efeito depende fortemente do contraste contra um fundo escuro, por isso a ferramenta inclui um campo de cor de fundo separado da cor do texto. Se precisar do mesmo título numa seção clara da página, deixe-o simples ali e reserve a versão néon para uma seção ou card escuro.
Isso afeta o desempenho da página se eu usar em muito texto?
Text-shadow é uma propriedade CSS relativamente leve, então alguns títulos brilhantes não vão afetar o desempenho de forma perceptível. Ainda assim, aplicar cinco camadas de sombra empilhadas num bloco grande de texto corrido não é recomendado pela legibilidade, independentemente do desempenho.
Posso usar uma cor de brilho diferente para cada palavra num título?
A ferramenta gera uma cor de brilho por geração, mas você pode envolver palavras diferentes em tags <span> separadas com seu próprio valor de text-shadow (gere uma cor, copie o CSS, repita para a segunda cor) para obter um efeito de brilho multicolorido.
O CSS gerado funciona igual em alternâncias de modo escuro e modo claro?
O efeito néon foi projetado por natureza em torno de um fundo escuro, então, se o seu site suporta alternância claro/escuro, o ideal é aplicar o estilo de brilho apenas dentro do CSS do modo escuro, em vez de tentar fazê-lo funcionar nos dois temas.