Gerar gradiente CSS
O Gerador de gradiente CSS cria um gradiente linear, radial ou cônico e entrega o CSS pronto. Ele interpola em OKLab em vez de sRGB, o que evita que um gradiente de azul para amarelo fique cinza no meio, e escreve o resultado duas vezes: uma como um gradiente moderno com `in oklab` e outra como a mesma curva amostrada em doze paradas simples, para que navegadores mais antigos vejam a mesma imagem.
Tipo
A cor muda ao longo de uma linha reta no ângulo escolhido. É a opção mais comum.
Paradas (2)
- 0%
- 100%
CSS
background: linear-gradient(135deg, #00696f 0.0%, #2d726e 9.1%, #467b6c 18.2%, #5b846a 27.3%, #6f8c67 36.4%, #839563 45.5%, #969d5e 54.5%, #a9a557 63.6%, #bcad4f 72.7%, #cfb544 81.8%, #e2bd35 90.9%, #f5c518 100.0%);
background: linear-gradient(135deg in oklab, #00696f 0%, #f5c518 100%);Duas declarações nessa ordem: navegadores que entendem in oklab usam a segunda; os antigos mantêm a primeira com a mesma curva expressa por paradas.
A diferença entre os espaços de cor
As mesmas paradas interpoladas de duas maneiras. A diferença é maior quando as cores ficam em lados opostos do círculo: experimente azul e amarelo.
sRGB — padrão
OKLab — in oklab
Alternativa de 12 paradas
Como funciona o Gerar gradiente CSS?
Um gradiente é uma regra para produzir todas as cores entre duas outras, e a questão toda é em qual espaço essa produção acontece. O padrão é sRGB, e a interpolação sRGB tem uma falha famosa: o ponto médio de duas cores saturadas de lados opostos do círculo cromático não é uma cor entre elas, é uma papa dessaturada. De azul a amarelo fica cinza. De vermelho a verde fica marrom. Não é um bug do navegador — é o que a média de três canais com codificação gamma faz.
Por que o OKLab resolve isso
OKLab é um espaço perceptual: seus três eixos são aproximadamente luminosidade, verde-para-vermelho e azul-para-amarelo, e as distâncias nele correspondem às distâncias que o olho relata. Fazer a média de duas cores ali dá a cor que uma pessoa nomearia como o meio do caminho entre elas, porque foi para isso que o espaço foi construído. O CSS Color 4 permite pedir isso diretamente com in oklab, e todo navegador atual dá suporte.
O que o fallback está fazendo
O in oklab chegou aos navegadores em 2023. Em vez de deixar qualquer versão mais antiga com um gradiente visivelmente diferente, esta ferramenta amostra a curva OKLab em doze pontos e os escreve como paradas de cor comuns. O navegador antigo então interpola em sRGB — mas só em segmentos curtos, cujas extremidades já estão na curva correta, e em um segmento tão curto os dois espaços não divergem visivelmente. As duas declarações são emitidas, nessa ordem, então um navegador que entende a segunda a usa, e um que não entende fica com a primeira.
A outra coisa que dá errado com gradientes
Banding. Um gradiente em uma área ampla passa por um número limitado de valores de 8 bits, e em uma superfície grande e lisa você enxerga os degraus como listras. Nada no CSS resolve isso, porque o display ficou genuinamente sem valores; o que resolve é uma pequena quantidade de ruído por cima — um PNG em mosaico de poucas centenas de bytes a 3% de opacidade, ou uma camada SVG feTurbulence. Se o seu gradiente hero parece listrado, é isso que você está vendo, e nenhuma quantidade de paradas de cor extra vai ajudar.
E uma palavra sobre usá-los ou não
Um gradiente atrás de texto é um problema de contraste: a proporção muda ao longo do elemento, então o canto que passa e o canto que reprova são ambos reais. Se o texto precisa ficar sobre um, verifique os extremos em vez do meio, ou coloque o texto em um painel sólido sobre o gradiente.
Paradas e uma direção
linear, 135° #00696f 0% #f5c518 100%
O CSS, duas vezes
background: linear-gradient(135deg, #00696f 0.0%, #2a7767 9.1%, #4b855c 18.2%, …); background: linear-gradient(135deg in oklab, #00696f 0%, #f5c518 100%);
Quais opções e casos-limite o Gerar gradiente CSS suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| Linear | ângulo | 135deg | 0deg aponta para cima, 90deg aponta para a direita. O ângulo é a direção que as cores viajam, não a direção para a qual a linha se inclina. |
| Radial | círculo no centro | — | As cores se espalham para fora do centro. `circle` mantém o formato circular em uma caixa não quadrada; o `ellipse` padrão se estica junto com o elemento. |
| Cônico | a partir do ângulo | 135deg | As cores varrem em torno do centro. A base de todos os gráficos de pizza e controles giratórios em CSS, e do anel de matiz em um seletor de cores. |
| em oklab | palavra-chave | on | Interpola de forma perceptiva. Suportado desde 2023 — Chrome 111, Safari 16.2, Firefox 113. Desative para ver o que um gradiente comum faz com as mesmas paradas. |
| Alternativa | 12 paradas | automático | A curva OKLab amostrada em paradas simples, emitida como a primeira das duas declarações para que navegadores mais antigos correspondam. |
| Posição da parada | 0–100% | uniforme | Onde na linha do gradiente a cor se posiciona. Duas paradas na mesma posição criam uma borda nítida em vez de uma mesclagem. |
| Cor da parada | qualquer notação | — | Hex, rgb(), hsl(), oklch() ou um nome de cor CSS. O alfa é mantido, e um gradiente para `transparent` deve especificar a cor com alfa 0 em vez da palavra-chave. |
| Paradas | 2 ou mais | 2 | Novas paradas são inseridas na maior lacuna, tomando a cor que a curva já tem ali, portanto, adicionar uma não altera o gradiente. |
Perguntas frequentes
Como criar um gradiente CSS?
Defina `background: linear-gradient(135deg, #00696f, #f5c518)` — um ângulo seguido de duas ou mais cores. 0deg vai de baixo para cima e 90deg vai da esquerda para a direita. Adicione uma porcentagem depois de uma cor para fixá-la em uma posição da linha, use `radial-gradient` para cores irradiando de um ponto e `conic-gradient` para cores varrendo ao redor dele. Esta página escreve os três, com a correção de interpolação e um fallback, a partir das paradas que você definir.
Por que meu gradiente fica cinza no meio?
Porque o navegador está fazendo a média dos canais sRGB com codificação gamma, e a média de duas cores saturadas de lados opostos do círculo cromático é uma cor dessaturada. De azul a amarelo é o caso clássico. Adicionar `in oklab` depois do ângulo resolve — a interpolação então acontece em um espaço perceptual, em que o ponto médio é a cor que você nomearia como o meio do caminho. Para navegadores mais antigos, use o fallback de doze paradas que esta ferramenta emite junto com ele.
Usar `in oklab` em produção é seguro?
Sim, com o fallback. Ele chegou no Chrome 111, Safari 16.2 e Firefox 113, o que cobre a esmagadora maioria do tráfego em 2026. Qualquer versão mais antiga ignora a declaração inteira como inválida — e é por isso que a versão de paradas simples é emitida primeiro: o CSS fica com a última declaração que entende, então navegadores antigos mantêm o fallback e os novos ficam com a versão OKLab. Nenhum deles nunca vê um background quebrado.
Por que meu gradiente tem listras visíveis?
Isso é banding, e é uma limitação do display, não do CSS. Em uma área grande, um gradiente precisa passar por um conjunto limitado de valores de 8 bits, e os degraus ficam visíveis como faixas — pior em gradientes escuros sutis, que é onde os valores estão mais distantes perceptualmente. Mais paradas de cor não ajudam, porque os valores simplesmente não existem. Uma textura de ruído leve por cima resolve: um PNG em mosaico com cerca de 3% de opacidade, ou uma camada SVG feTurbulence.
Posso colocar texto sobre um gradiente?
Pode, mas a razão de contraste é diferente em cada ponto, então 'passa' não é um fato único sobre o elemento. Verifique o ponto mais claro e o mais escuro que o texto realmente cruza, e trate o pior dos dois como a razão real. Quando a variação é ampla, a resposta prática é colocar o texto em um painel sólido ou semitransparente sobre o gradiente, em vez de diretamente sobre ele.
Como esmaecer um gradiente até a transparência?
Não com a palavra-chave `transparent`. Em vários motores ela vira preto transparente, então esmaecer um vermelho até ela atravessa rosas escuros e turvos. Use a mesma cor com alfa zero em vez disso — de `#ff0000` para `#ff000000`, ou `rgb(255 0 0 / 0)` — e o matiz se mantém até o fim. Interpolar em OKLab reduz o efeito, mas não elimina a causa.