Gerador de degradê CSS
CSS Gradient Builder
Monta degradês lineares, radiais e cônicos com paradas arrastáveis e gera o CSS, em sRGB ou OKLCH.
Constrói um degradê linear, radial ou cônico e emite o CSS, incluindo a cláusula de interpolação `in oklch` que decide o que acontece entre as paradas. As mesmas paradas são sempre desenhadas uma segunda vez em sRGB embaixo, porque o argumento a favor de interpolar em um espaço perceptual é visual, e quatro centímetros de degradê o fazem mais rápido do que um parágrafo.
As mesmas paradas em sRGB, para comparar. Se o meio desta faixa parecer lavado ao lado da de cima, é o espaço de interpolação fazendo o serviço dele: uma reta pelo cubo sRGB entre dois matizes opostos passa perto do eixo neutro.
Percorre a roda de matizes, então o ponto médio mantém o croma. É o padrão, e a razão de o CSS ter ganhado essa sintaxe.
Paradas
- 0%
- 100%
Predefinições
CSS
background-image: linear-gradient(135deg in oklch, #5b6cff 0%, #22d3ee 100%);A cláusula in oklch precisa de um navegador de 2023 ou mais novo. Motores mais antigos descartam a declaração inteira em vez de cair para uma alternativa, então ponha junto um gradiente sRGB comum numa declaração anterior se você precisa deles.
Como usar
Escolha o tipo, depois o ângulo
Linear viaja em linha reta, radial se espalha a partir de um ponto, cônico varre ao redor de um. O ângulo se aplica a linear e cônico; radial recebe uma forma e um centro em vez disso.
Posicione as paradas
Cada parada tem uma cor e uma posição de 0 a 100%. Duas é o mínimo; adicionar uma redistribui as posições uniformemente, e depois você pode movê-las. As predefinições são um jeito rápido de ver como três ou quatro paradas se comportam.
Escolha o espaço de interpolação — esta é a decisão de verdade
OKLCH mantém o croma pelo meio, que é o que impede azul-para-amarelo de ficar cinza na metade do caminho. OKLab toma o caminho perceptual mais curto e é o certo quando as duas paradas estão próximas em matiz. sRGB é o comportamento legado, e vale escolher deliberadamente se você precisa que navegadores antigos obtenham o mesmo resultado que os novos.
Em um espaço polar, decida para que lado dar a volta no círculo
OKLCH, LCH e HSL são polares, então há dois arcos entre dois matizes quaisquer. `shorter` é o padrão e normalmente o que você quer; `longer` transforma um degradê de duas paradas em um arco-íris, o que ocasionalmente é exatamente o efeito.
Copie o valor ou a declaração inteira
O valor entra em um `background-image` existente; a declaração está pronta para colar sozinha.
Perguntas frequentes
`in oklch` vai funcionar em todo navegador?
Não. Precisa de um motor de 2023 ou mais recente, e um mais antigo descarta a declaração inteira em vez de recuar para sRGB — não há suporte parcial aqui. Ponha um degradê sRGB simples em uma declaração anterior e deixe o motor mais novo sobrescrevê-la, que é o fallback padrão da cascata CSS e custa uma linha a mais.
Por que a faixa sRGB fica cinza no meio?
Porque interpolar em sRGB traça uma linha reta pelo cubo de cores, e a linha entre dois matizes mais ou menos opostos passa perto do eixo neutro. Não há nada de errado com o degradê — ele está fazendo exatamente o que os números dizem, e os números nunca foram sobre como a cor parece.
Meu degradê tem faixas visíveis. Isto consegue corrigir?
Não diretamente. As faixas são a saída de 8 bits quantizando uma rampa lenta sobre uma área grande, e nenhuma escolha de espaço de interpolação as remove. As respostas habituais são uma sobreposição leve de ruído, uma textura repetida sutil, ou fazer o degradê percorrer uma distância menor. Esta ferramenta emite só CSS e não faz dithering.
Posso exportar como imagem?
Não. A saída é um valor CSS, que é menor do que qualquer imagem dele, independente de resolução e animável. Se você precisa de um arquivo raster — para um template de e-mail, digamos, em que degradês CSS não são confiáveis — tire uma captura de tela da prévia ou construa-o no gerador de padrões de fundo, que desenha em um canvas.
Pode receber de
Gerador de box-shadow
Box Shadow Generator
Compõe sombras de caixa e de texto em camadas com prévia ao vivo e gera o CSS.
Gerador de padrões de fundo
Background Pattern Generator
Gera padrões SVG repetíveis — listras, pontos, grades, ruído — com controle de cor e escala.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Gerador de paleta de cores
Palette Generator
Monta uma paleta harmoniosa a partir de uma cor base usando regras complementar, triádica e análoga.
Gerador de padrões de fundo
Background Pattern Generator
Gera padrões SVG repetíveis — listras, pontos, grades, ruído — com controle de cor e escala.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.