Gerador de Glow CSS

Efeito glow em CSS: neon, halo e glassmorphism

Um glow é o halo suave de cor que envolve objetos luminosos — letreiros de neon, telas no escuro, botões de UI sci-fi. Em CSS, glows são geralmente construídos com box-shadow para caixas ou text-shadow para texto, ambos aceitando uma cor com alpha e um raio de blur. O truque essencial é empilhar várias sombras da mesma cor com raios diferentes para a luz cair gradualmente, como uma lâmpada real.

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

Para formas arbitrárias — um ícone com contorno irregular, um PNG transparente, um SVG — filter: drop-shadow() é a ferramenta certa. Diferente de box-shadow, que sempre segue a bounding box retangular, drop-shadow respeita o canal alpha da origem, então o glow abraça a silhueta real do elemento. Você pode encadear várias chamadas drop-shadow dentro do mesmo filter para empilhar halos.

box-shadow vs text-shadow vs drop-shadow

• box-shadow — mais rápido, segue o border-box, ideal para botões e cards retangulares.
• text-shadow — pinta atrás de cada glifo; perfeito para títulos, letreiros neon e pixel art.
• filter: drop-shadow — respeita transparência; única opção para ícones SVG/PNG e formas recortadas. Mais caro em GPUs móveis.

Animando o glow

Glows parecem vivos quando pulsam. Anime opacity, a cor da sombra ou até o raio de blur dentro de uma regra @keyframes, alternando com animation-direction: alternate para um efeito de respiração. Para uma sensação de letreiro neon piscando, use passos erráticos com animation-timing-function: steps() no lugar de ease-in-out. Pulsos fortes ou rápidos podem disparar crises fotossensíveis, então sempre ofereça um fallback via prefers-reduced-motion.

Glassmorphism e dark mode

Glows brilham em fundos escuros — o contraste entre halo claro e canvas profundo é o que se lê como "luminoso". Em fundos claros, a mesma sombra some ou parece sujeira, então ajuste a intensidade via @media (prefers-color-scheme: dark). A tendência "glassmorphism" popularizada pelo macOS Big Sur (2020) combina um glow sutil com backdrop-filter: blur(10px) sobre um painel semi-transparente — o fundo borrado simula vidro fosco e o glow reforça a sensação de "iluminado por dentro". Estéticas synthwave e cyberpunk vão além, com glows saturados de magenta/ciano sobre fundos quase pretos.

Perguntas frequentes

Por que meu box-shadow não segue o formato do ícone? box-shadow sempre usa a caixa do elemento, não o conteúdo visível. Para silhuetas irregulares (SVG, PNG transparente), troque por filter: drop-shadow().

Várias sombras são caras? Cada sombra é um passo de paint separado. Três ou quatro tudo bem; dez sobre centenas de elementos vai prejudicar scroll no mobile. Teste em um Android low-end e reduza a quantidade se o frame rate cair.

Como fazer um halo colorido em torno de uma imagem? Use filter: drop-shadow(0 0 12px rgba(0, 200, 255, 0.8)). Para imagens sem transparência, é possível também envolvê-las e colocar uma cópia desfocada por baixo com filter: blur(20px) brightness(1.2).

Glow melhora acessibilidade? Um glow em botões focados pode complementar (mas não substituir) o anel de foco. Mantenha o outline nativo visível ou replique com uma borda de alto contraste, senão usuários de teclado vão perder a posição na página.