# Gradientes vibrantes: códigos saturados que não tremem

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

Cor saturada é o jeito mais rápido de ser notado e de cansar a vista. Estes códigos são vivos de propósito e feitos para que as bordas nunca tremam, com os motivos, para você criar os seus.

## The short version

- Um gradiente vibrante usa cores muito saturadas, mas só é confortável de olhar quando as cores vizinhas têm matizes próximos e diferem claramente em luminosidade.
- Cores de matizes opostos e luminosidade parecida, lado a lado, parecem tremer, um efeito muitas vezes chamado de vibração cromática.
- Opostos saturados misturados direto em sRGB passam por um meio acinzentado, o que a interpolação em oklch evita em boa parte.
- Um fundo escuro ou neutro dá ao olho um lugar para descansar e faz a cor vibrante parecer mais viva do que sobre o branco.
- Texto sobre um gradiente vibrante se lê melhor em quase preto ou branco, nunca em outra cor saturada de luminosidade parecida.

Um **gradiente vibrante** é vivo e saturado sem tremer quando duas regras valem: cada cor fica perto da vizinha no círculo cromático e cada passo muda claramente de luminosidade. Quebre a primeira e o meio fica barrento; quebre a segunda, colocando matizes opostos de mesmo brilho lado a lado, e a borda parece tremer. Os doze códigos abaixo seguem as duas regras, então são fortes do jeito que um pôster é forte, não do jeito que uma enxaqueca é.

## Doze códigos de gradiente vibrante

- Manga: `linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%)`
- Violeta elétrico: `linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%)`
- Lagoa: `linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #10b981 100%)`
- Flamingo: `linear-gradient(135deg, #db2777 0%, #f43f5e 50%, #fb923c 100%)`
- Limonada: `linear-gradient(135deg, #16a34a 0%, #84cc16 55%, #facc15 100%)`
- Ultra: `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)`
- Cereja pop: `linear-gradient(160deg, #be123c 0%, #e11d48 45%, #f472b6 100%)`
- Geleira: `linear-gradient(135deg, #0d9488 0%, #22d3ee 50%, #818cf8 100%)`
- Rosa sobre a noite: `radial-gradient(circle at 30% 30%, #f472b6 0%, #9333ea 35%, #1e1033 75%)`
- Brasa: `radial-gradient(circle at 70% 75%, #facc15 0%, #f97316 30%, #7c2d12 70%)`
- Cobalto subindo: `linear-gradient(180deg, #0f172a 0%, #2563eb 50%, #38bdf8 100%)`
- Do coral ao ouro, oklch: `linear-gradient(90deg in oklch, oklch(65% 0.24 20) 0%, oklch(78% 0.17 75) 100%)`

Toda mistura passa por matizes vizinhos enquanto fica mais clara ou mais escura, o que a mantém limpa. A última foi escrita em oklch e precisa de um navegador atual.

## Por que alguns gradientes vivos vibram

Coloque um vermelho saturado direto contra um azul saturado de brilho parecido e o limite parece piscar, como se as duas cores não conseguissem decidir qual está na frente. Os designers chamam isso de vibração cromática. É mais forte em bordas duras, em linhas finas e em texto colorido, e é por isso que texto vermelho sobre fundo azul cansa tanto de ler. As cores em si estão certas; é a combinação de matiz oposto e luminosidade igual, encostados, que causa o efeito.

- Vibra: borda dura, mesmo brilho: `linear-gradient(90deg, #ff2a2a 0%, #ff2a2a 50%, #1f8fff 50%, #1f8fff 100%)`
- Calmo: um passo escuro no meio: `linear-gradient(90deg, #ff2a2a 0%, #7f1d1d 42%, #0c3a66 58%, #1f8fff 100%)`

O mesmo vermelho e o mesmo azul. À esquerda eles se tocam com o mesmo brilho e a borda treme; à direita um passo profundo os separa e as duas cores parecem mais fortes.

Há duas soluções. Ou você separa as cores com um passo mais escuro ou mais claro entre elas, como à direita, ou escolhe vizinhas em vez de opostas. [Cores complementares](https://gradiently.design/pt-br/guide/complementary-colors) explica quando os opostos valem o trabalho.

## Regras para criar o seu gradiente vibrante

| Regra | Por quê | Exemplo |
| --- | --- | --- |
| Fique dentro de um terço do círculo | Vizinhas se misturam sem passar pelo cinza | Índigo, violeta, magenta |
| Escalone a luminosidade | Dá profundidade e impede as bordas de tremer | Do profundo `#1d4ed8` ao vivo `#38bdf8` |
| Use uma cor protagonista | Três cores igualmente fortes brigam | O magenta é o pico; o resto o apoia |
| Some uma base | Uma área escura ou neutra deixa o olho descansar | Rosa sobre a noite, brasa |
| Misture em oklch | Mantém o ponto médio saturado, não opaco | Do coral ao ouro, oklch |

Cinco regras por trás de cada código acima. Quebre uma de propósito, nunca por acidente.

O barro é o outro jeito de falharem os gradientes vivos. Misture dois opostos saturados em sRGB puro e a cor do meio cai para o cinza, o que é tratado em [gradientes barrentos](https://gradiently.design/pt-br/guide/muddy-gradients) e, em nível mais técnico, em [interpolação de gradientes](https://gradiently.design/pt-br/guide/gradient-interpolation). A saturação em si é um botão giratório, não um interruptor; [saturação no design](https://gradiently.design/pt-br/guide/color-saturation) mostra como ajustá-la.

## Gradientes vibrantes em CSS

Navegadores modernos podem misturar em um espaço de cor perceptual ao acrescentar `in oklch` ao gradiente. Isso mantém o meio de uma mistura ampla tão vivo quanto as pontas. Dê antes aos navegadores mais antigos uma versão em hex.

```css
.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}
```

O gradiente Ultra com um fallback de três pontos e uma versão oklch de dois pontos que continua viva no meio sem um ponto auxiliar.

## Onde os gradientes vibrantes funcionam melhor

A cor vibrante conquista atenção, então gaste-a onde atenção é todo o trabalho: um feed que rola, uma miniatura entre vinte outras, um pôster do outro lado da rua. Funciona menos onde as pessoas precisam ler por muito tempo, como documentos, painéis e artigos longos, em que um campo saturado cansa a vista em poucos parágrafos. Ali, limite o gradiente vibrante a um cabeçalho ou a um único botão e deixe uma superfície calma carregar o resto.

| Uso | Experimente | Tamanho |
| --- | --- | --- |
| Post de promoção ou lançamento | Manga, Flamingo | 1080×1350 |
| Miniatura do YouTube | Violeta elétrico, Brasa | 1280×720 |
| Destaque de app ou produto | Lagoa, Geleira | 1920×1080 |
| Story ou capa de Reel | Limonada, Cereja pop | 1080×1920 |
| Capa de playlist | Rosa sobre a noite, Ultra | 1080×1080 |
| Pôster A4 de evento | Ultra, Cobalto subindo | 2480×3508 |

Seis lugares em que os gradientes vibrantes dão conta do recado, com códigos da grade acima e o tamanho para criar.

A impressão é o único lugar para esperar um choque. As cores mais vivas da tela, sobretudo azuis elétricos, rosas fortes e verdes ácidos, ficam fora do que as tintas CMYK reproduzem e voltam visivelmente mais opacas no papel. [RGB ou CMYK](https://gradiently.design/pt-br/guide/rgb-vs-cmyk) explica por quê; escolha você mesmo versões um pouco mais profundas e peça uma prova antes de uma tiragem.

## Palavras sobre um gradiente vibrante

Fundos saturados variam em brilho de uma ponta à outra, então uma única cor de texto que se lê na ponta escura pode sumir na clara. Use só branco ou quase preto, posicione o título onde o gradiente é mais profundo ou mais pálido e confira o contraste no pior ponto, não na média. [Contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) traz os números a buscar.

Um post vertical de promoção com texto em negrito sobre um fundo vivo e saturado

Um fundo forte com texto simples e pesado. A cor vende; as palavras só precisam ser legíveis.

É aí que um Mark do Gradiently ajuda com a cor viva: ele sabe onde estão as palavras, aprofunda ou clareia a cor perto das letras, e a tinta automática escolhe texto claro ou escuro por linha a partir da própria paleta. Um visual saturado continua legível em todos os tamanhos sem caixa nem sombra atrás do título. Para visuais neon, veja [gradientes neon](https://gradiently.design/pt-br/guide/neon-gradients); para a outra ponta do botão, [gradientes sutis](https://gradiently.design/pt-br/guide/subtle-gradients).

## FAQ

### O que faz um gradiente parecer vibrante?

Cores muito saturadas, próximas no círculo cromático, com uma mudança clara de luminosidade de uma ponta à outra.

### Por que algumas combinações de cores vivas machucam a vista?

Matizes opostos de luminosidade parecida, lado a lado, parecem tremer. Separe-os com um passo mais escuro ou mais claro, ou escolha cores vizinhas.

### Como evitar que um gradiente vivo fique cinza no meio?

Use matizes vizinhos, adicione um ponto intermediário ou misture em oklch com `linear-gradient(in oklch, ...)` nos navegadores que oferecem suporte.

### Que cor de texto funciona sobre um gradiente vibrante?

Branco ou quase preto. Confira o contraste no ponto mais claro e no mais escuro atrás das palavras, não só no meio.

### Qual é um bom gradiente vibrante para o destaque de um site?

Experimente `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)` com texto branco.