Gerador de Gradiente CSS – Linear, radial e cônico com interpolação OKLCH

Monte gradientes CSS linear, radial e cônico com prévia ao vivo e copie o código ou a classe do Tailwind. Suporta interpolação em OKLCH.

Processado no navegador – nenhum dado enviado ao servidor

Presets

Ângulo: 90°

Paradas de cor

Cor 1Posição da cor 1 (%)0%
Cor 2Posição da cor 2 (%)100%

Interpolar em OKLCHPor padrão o navegador mistura as cores em sRGB, canal por canal. Entre cores opostas — azul e amarelo, por exemplo — a média dos canais cai perto do cinza, e o meio do gradiente fica “sujo”. Em OKLCH a mistura percorre o matiz mantendo luminosidade e saturação, sem a faixa acinzentada.

sRGB (padrão)

OKLCH

CSS

background: linear-gradient(90deg, #2563eb 0%, #facc15 100%);

Classe Tailwind

bg-[linear-gradient(90deg,#2563eb_0%,#facc15_100%)]

Valor arbitrário: os espaços viram “_”, que o Tailwind converte de volta. Funciona no v3 e no v4.

Como usar esta ferramenta

Comece por um preset ou escolha o tipo: linear, radial ou cônico
Ajuste o ângulo (ou a forma, no radial) e as cores com suas posições
Adicione, remova ou reordene as paradas de cor até a prévia ficar como quer
Ative a interpolação OKLCH se o meio do gradiente estiver acinzentado e copie o CSS ou a classe Tailwind

Sobre esta ferramenta

O que é

Um gradiente CSS é uma imagem gerada pelo navegador que passa de uma cor para outra. Por padrão a mistura é feita em sRGB, canal por canal — e entre cores opostas, como azul e amarelo, a média dos canais cai perto do cinza. Interpolar em OKLCH percorre o matiz mantendo luminosidade e saturação, e o meio do gradiente fica vivo.

Quando usar

Criar fundos de hero, cards e botões sem exportar imagem
Corrigir um gradiente com faixa cinza ou lamacenta no meio
Gerar a classe arbitrária do Tailwind sem errar a troca de espaços por _
Montar um gradiente cônico para gráficos de pizza ou rodas de cor

Segurança

Processamento 100% no navegador. Nenhum dado é enviado ao servidor — seus dados sensíveis permanecem no seu dispositivo.

Perguntas frequentes

Por que meu gradiente fica cinza no meio?: Porque o navegador interpola em sRGB por padrão. Entre azul (#2563eb) e amarelo (#facc15), a média de cada canal dá um tom perto do cinza. Com linear-gradient(90deg in oklch, ...) a mistura acontece em um espaço perceptual e passa por verdes e cianos saturados em vez do cinza.
O "in oklch" funciona em todos os navegadores?: Funciona no Chrome e Edge 111+, Safari 16.2+ e Firefox 127+. Navegadores mais antigos descartam a declaração inteira; por isso o CSS gerado traz antes uma linha com o mesmo gradiente em sRGB, que fica valendo nesses casos.
Como usar o gradiente no Tailwind?: Copie a classe bg-[linear-gradient(...)]. Dentro de valores arbitrários o Tailwind não aceita espaço, então cada espaço vira _ e ele converte de volta ao gerar o CSS. Funciona no Tailwind v3 e no v4.
Qual a diferença entre linear, radial e cônico?: O linear muda de cor ao longo de uma reta, na direção do ângulo. O radial parte do centro para fora, em círculo ou elipse. O cônico gira em volta do centro, como os ponteiros de um relógio — é o que se usa para gráficos de pizza e rodas de cor.

Ferramentas relacionadas

Como usar esta ferramenta

Comece por um preset ou escolha o tipo: linear, radial ou cônico

Ajuste o ângulo (ou a forma, no radial) e as cores com suas posições

Adicione, remova ou reordene as paradas de cor até a prévia ficar como quer

Ative a interpolação OKLCH se o meio do gradiente estiver acinzentado e copie o CSS ou a classe Tailwind

Sobre esta ferramenta

O que é

Quando usar

Criar fundos de hero, cards e botões sem exportar imagem
Corrigir um gradiente com faixa cinza ou lamacenta no meio
Gerar a classe arbitrária do Tailwind sem errar a troca de espaços por _
Montar um gradiente cônico para gráficos de pizza ou rodas de cor

Segurança

Processamento 100% no navegador. Nenhum dado é enviado ao servidor — seus dados sensíveis permanecem no seu dispositivo.

Perguntas frequentes

Por que meu gradiente fica cinza no meio?

Porque o navegador interpola em sRGB por padrão. Entre azul (#2563eb) e amarelo (#facc15), a média de cada canal dá um tom perto do cinza. Com linear-gradient(90deg in oklch, ...) a mistura acontece em um espaço perceptual e passa por verdes e cianos saturados em vez do cinza.

O "in oklch" funciona em todos os navegadores?

Funciona no Chrome e Edge 111+, Safari 16.2+ e Firefox 127+. Navegadores mais antigos descartam a declaração inteira; por isso o CSS gerado traz antes uma linha com o mesmo gradiente em sRGB, que fica valendo nesses casos.

Como usar o gradiente no Tailwind?

Copie a classe bg-[linear-gradient(...)]. Dentro de valores arbitrários o Tailwind não aceita espaço, então cada espaço vira _ e ele converte de volta ao gerar o CSS. Funciona no Tailwind v3 e no v4.

Qual a diferença entre linear, radial e cônico?

O linear muda de cor ao longo de uma reta, na direção do ângulo. O radial parte do centro para fora, em círculo ou elipse. O cônico gira em volta do centro, como os ponteiros de um relógio — é o que se usa para gráficos de pizza e rodas de cor.