# Gerador de gradientes CSS

> Monte gradientes lineares, radiais e cônicos e compare a interpolação em sRGB, OKLab e OKLCH, sem o cinza no meio.

URL: https://dpw.dev/ferramentas/gerador-de-gradientes/

Escolha o tipo, o ângulo e as cores: o gerador monta o gradiente e mostra, lado a lado, a diferença entre interpolar em sRGB, OKLab e OKLCH.

Esta página tem um gerador interativo no navegador. Exemplo: de `#2563eb` para `#ffd600`, interpolado em OKLCH, com o fallback em sRGB:

```css
.element {
  /* Sem suporte à interpolação, fica o sRGB. */
  background: linear-gradient(90deg, #2563eb, #ffd600);
  background: linear-gradient(90deg in oklch, #2563eb, #ffd600);
}
```

## O problema

Um gradiente entre duas cores vivas costuma passar por um cinza sujo no meio. De azul para amarelo, o ponto médio em sRGB é cinza, porque o navegador mistura os canais R, G e B em linha reta, e a média de duas cores opostas é neutra.

A saída era pôr paradas extras à mão no meio do gradiente para desviar do cinza, e refazer a conta a cada troca de cor.

## Como funciona

Desde o CSS Color 4, o gradiente diz em que espaço de cor a mistura acontece:

`linear-gradient(90deg in oklch, #2563eb, #ffd600)`

`in oklab` mistura em linha reta num espaço que segue a percepção; `in oklch` gira o matiz pelo caminho mais curto do círculo e mantém o croma, por isso passa por cores vivas.

Navegador que ainda não conhece a interpolação ignora a declaração inteira. Por isso o código traz antes a mesma linha sem o `in`: quem não entende fica com o gradiente em sRGB, e ninguém fica sem fundo.

OKLab é a escolha segura na maioria dos casos. OKLCH dá meios mais vivos, mas pode passar por matizes que não estão em nenhuma das pontas: de azul para amarelo, ele atravessa o verde.

## Quando usar

- Fundos e áreas de destaque com duas cores vivas, sem a faixa cinza no meio.
- Gradientes de marca que precisam combinar com cores definidas em OKLCH.
- Barras de progresso e escalas de valor, em que o meio do caminho precisa ser legível.
- Trocar paradas extras postas à mão por uma interpolação melhor.

Suporte: funciona nos navegadores atuais desde junho de 2024 ([Baseline](https://webstatus.dev/features/gradient-interpolation)).

## Conceitos Fundamentais de CSS

Gradiente no CSS é imagem, não cor: por isso ele vai em `background-image` e não aceita transição como uma cor aceita. O livro explica esse modelo em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml