# Gradientes néon: brilho sem cansar a vista

[Canonical HTML page](https://gradiently.design/pt-pt/guide/neon-gradients)

O néon é a cor no máximo. Sobre um fundo escuro, brilha; espalhado por um ecrã inteiro, zumbe. Eis como manter o brilho e perder o zumbido.

## The short version

- Um gradiente néon usa cores muito saturadas, como rosa-choque, azul-elétrico, ciano e verde-ácido, normalmente a brilhar a partir de um fundo escuro.
- O néon só parece luz quando está rodeado de escuridão; sobre um fundo claro, as mesmas cores parecem berrantes e planas.
- Duas cores saturadas de luminosidade semelhante encostadas uma à outra parecem vibrar, e essa é a principal causa do cansaço visual com o néon.
- Manter o néon numa pequena parte da superfície e pôr o texto em branco ou quase branco, e não em néon, torna-o confortável de ver.
- Os gradientes néon servem música, jogos, vida noturna e lançamentos de tecnologia, onde a energia é o objetivo.

Um **gradiente néon** é uma mistura de cores muito saturadas, como rosa-choque, violeta, azul-elétrico, ciano ou verde-ácido, normalmente a brilhar a partir de um fundo escuro, como um tubo aceso numa rua escura. É o tipo de gradiente mais enérgico que existe. É também o que mais facilmente cansa a vista, porque cores saturadas lado a lado podem cintilar e vibrar. A solução não é menos cor, é mais escuridão à volta.

## O que faz um gradiente parecer néon

Os verdadeiros letreiros de néon são linhas finas de cor intensa rodeadas por um halo suave e por uma noite escura. Para parecer néon num ecrã, um gradiente precisa das mesmas três coisas: cor na saturação máxima ou perto dela, um núcleo brilhante que se desvanece num halo e um fundo escuro que torna o halo visível. Tira a escuridão e tens um bloco de cor berrante em vez de luz.

- Tubo rosa-choque: `radial-gradient(ellipse at 50% 50%, #ff4fd8 0%, #b0127a 25%, #1a0314 60%, #07020a 100%)`
- Ciano laser: `linear-gradient(180deg, #05060f 0%, #062a3a 55%, #00e5ff 100%)`
- Lima ácida: `radial-gradient(circle at 70% 30%, #c6ff00 0%, #3f6b00 30%, #0a1200 70%)`
- Ultravioleta: `linear-gradient(135deg, #0b0418 0%, #5b12d6 55%, #d04bff 100%)`
- Azul-elétrico: `radial-gradient(circle at 30% 70%, #2f6bff 0%, #0b1f7a 35%, #02040f 75%)`
- Pôr do sol de arcada: `linear-gradient(180deg, #120526 0%, #ff2d95 60%, #ffb800 100%)`

Néon sobre escuro: cada um tem um núcleo saturado, um halo a desvanecer e um fundo quase preto.

## Porque é que o néon cansa a vista

Quando duas cores muito saturadas de luminosidade semelhante se encontram numa aresta dura, como texto vermelho puro sobre azul puro, a aresta parece cintilar. Chama-se muitas vezes vibração cromática, e torna o texto cansativo ou até difícil de focar. O vermelho e o azul lado a lado também podem parecer estar a profundidades diferentes. Os designs néon tropeçam nas duas coisas porque todas as cores estão na força máxima.

### Cansa

- Néon a encher o enquadramento de ponta a ponta
- Texto néon sobre fundo néon
- Dois opostos saturados, como vermelho e azul, a tocarem-se numa aresta dura
- Efeitos de brilho a piscar ou em estroboscópio

### Brilha

- Néon numa pequena parte de uma superfície escura
- Texto branco ou quase branco com um halo de cor suave
- Cores saturadas separadas por escuridão ou por uma mistura suave
- Pulsações lentas e suaves, ou nenhuma

> **Nada de flashes rápidos** O néon animado que pisca mais de três vezes por segundo pode provocar convulsões em pessoas com epilepsia fotossensível, e as WCAG impõem-lhe um limite. Mantém qualquer cintilação lenta e subtil, e desliga-a para quem prefere movimento reduzido.

## Paletas de cores néon

As paletas néon funcionam melhor com uma ou duas cores luminosas mais um fundo escuro, e não cinco néons ao mesmo tempo. Rosa e violeta, ou ciano e azul, são vizinhos e brilham juntos sem vibrar. Rosa e ciano é o par clássico do synthwave; misturado através do violeta, mantém-se vivo em vez de ficar cinzento.

- Noite: #07020a
- Rosa-choque: #ff2d95
- Violeta elétrico: #7a3cff
- Ciano laser: #00e0ff
- Lima ácida: #c6ff00
- Âmbar de sódio: #ffb800

Um conjunto néon sobre uma noite quase preta. Escolhe uma ou duas das cores luminosas por design, não as cinco.

- Rosa, violeta, ciano: `linear-gradient(90deg, #ff2d95 0%, #7a3cff 50%, #00e0ff 100%)`
- Menta tóxica a azul: `linear-gradient(135deg, #00ff94 0%, #00b3ff 100%)`
- Rosa a âmbar: `linear-gradient(135deg, #ff2d95 0%, #ffb800 100%)`

Misturas néon na força máxima. Usa-as como acentos finos, linhas ou pequenas formas sobre escuro, não como o fundo inteiro.

## Como construir um gradiente néon

1. **Começa no escuro** Enche o enquadramento com um quase preto puxado para o teu néon, como um preto-violeta por baixo do rosa.
2. **Coloca um núcleo brilhante** Põe o néon na força máxima numa área pequena, uma linha, um anel ou um canto, não no meio do enquadramento.
3. **Deixa-o desvanecer** Esbate o núcleo através de uma versão profunda do mesmo matiz até ao escuro, para que se leia como um halo e não como uma mancha.
4. **Acrescenta um segundo néon só se for vizinho** Violeta ao lado de rosa, ou azul ao lado de ciano, brilham juntos. Os opostos precisam de escuridão entre eles.
5. **Termina com grão** Os halos escuros criam faixas com facilidade. Uma camada fina de ruído mantém-nos suaves; vê [faixas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding).

## Texto sobre néon

Põe as palavras em branco ou num tom muito pálido do teu néon, nunca num segundo néon. Um halo suave da cor néon à volta de letras brancas lê-se como um letreiro; letras saturadas sobre um fundo saturado leem-se como ruído. Mantém o texto corrido longe do brilho mais forte, na zona mais escura, e verifica o contraste como farias em qualquer fundo escuro; vê [fundos em gradiente escuro](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds).

```css
.neon-title {
  color: #fff0fa; /* pale pink, not neon */
  text-shadow:
    0 0 4px #ff2d95,
    0 0 16px #ff2d95,
    0 0 40px rgb(255 45 149 / 0.6);
}

.neon-panel {
  background: #07020a;
  box-shadow:
    0 0 0 1px rgb(0 224 255 / 0.6),
    0 0 24px rgb(0 224 255 / 0.35);
  border-radius: 16px;
}
```

Néon como luz: texto pálido com halos coloridos sobrepostos e um painel escuro com uma aresta ciano fina. A cor está no halo, não nas letras.

Um cartaz de noite de clube em que um brilho néon forte fica mesmo por trás do título

Quando o brilho mais forte passa por trás do título, o néon e as palavras lutam.

O mesmo cartaz com escuridão por trás do título e o brilho a enquadrá-lo

Escuridão por trás do título, brilho à volta: o cartaz lê-se de imediato.

## Onde os gradientes néon encaixam

| Funciona bem | Usa com cuidado |
| --- | --- |
| Música, noites de clube e festivais | Leituras longas ou documentação |
| Jogos, streaming e esports | Marcas de saúde, finanças e direito |
| Lançamentos de tecnologia e filmes de produto | Impressão, onde as cores néon não se conseguem reproduzir |
| Bares de cocktails e mercados noturnos | Produtos para crianças e bem-estar calmo |

O néon significa energia e noite. Onde as pessoas precisam de calma ou de confiança, funciona melhor como um único acento.

A impressão merece uma nota especial. Os néons de ecrã são mais vivos do que as tintas CMYK comuns conseguem reproduzir, por isso saem baços. As tintas diretas fluorescentes chegam perto; pergunta à tua gráfica e lê primeiro [gradientes para impressão](https://gradiently.design/pt-pt/guide/print-gradients). Para uma versão mais suave de cor luminosa, vê [gradientes aurora](https://gradiently.design/pt-pt/guide/aurora-gradients), e para a versão retro, [cores vaporwave](https://gradiently.design/pt-pt/guide/vaporwave-colors).

O néon ganha vida em movimento. Uma pulsação lenta sobre um fundo escuro dá um fundo forte para uma Story ou um Reel, e na Gradiently os designs feitos com um Mark reservado exportam como loops contínuos de 5 a 30 segundos, ao ritmo que escolheres.

## FAQ

### O que é um gradiente néon?

Um gradiente néon mistura cores muito saturadas como rosa-choque, azul-elétrico, ciano ou verde-ácido, normalmente a brilhar a partir de um fundo escuro.

### Porque é que as cores néon me fazem doer os olhos?

Cores saturadas de luminosidade semelhante numa aresta dura parecem vibrar. Separá-las com escuridão ou com uma mistura suave e usar texto branco resolve quase tudo.

### Que fundo combina com cores néon?

Um quase preto com um ligeiro toque de cor, como um violeta ou um azul-marinho muito escuros. O néon só parece luz quando está rodeado de escuridão.

### De que cor deve ser o texto sobre um gradiente néon?

Branco ou um tom muito pálido do néon, na zona mais escura, opcionalmente com um halo suave na cor néon.

### É possível imprimir gradientes néon?

Não exatamente. Os néons de ecrã são mais vivos do que as tintas CMYK normais, por isso saem mais baços. As tintas diretas fluorescentes chegam mais perto.