Gerador de gradiente CSS

Monte um gradiente linear, radial ou cônico com até oito paradas de cor, copie o CSS com uma alternativa em sRGB e exporte em PNG ou SVG.

Como Copiar o CSS

1
Escolha as cores e as posições das paradas
Comece com duas paradas e adicione até oito. Em cada parada, você digita o valor da cor e a posição em porcentagem, então dá para definir números exatos em vez de arrastar um controle com o mouse.
2
Escolha linear, radial ou cônico
Defina o ângulo de um gradiente linear ou cônico, a forma e o centro de um radial e se o gradiente inteiro se repete. A prévia é atualizada imediatamente.
3
Copie o CSS ou baixe um PNG
O CSS vem em duas declarações: uma alternativa em sRGB e, por cima dela, a versão moderna interpolada. Você também pode exportar o mesmo gradiente como PNG, em qualquer tamanho até 4096 pixels, ou como SVG.

Por que interpolar em OKLCH

Um gradiente de azul para amarelo em sRGB simples passa por um cinza apagado no meio. Isso não é defeito do seu navegador: tirar a média dos canais vermelho, verde e azul um a um anula o croma justamente onde o olho espera um verde limpo. O OKLCH é um espaço perceptual, então as mesmas duas pontas geram um ponto médio que continua saturado e uma rampa cujo brilho sobe por igual. O CSS moderno permite dizer em qual espaço interpolar, como em `linear-gradient(90deg in oklch, ...)`, e este gerador usa esse espaço por padrão, com oklab, sRGB e HSL disponíveis quando você quiser o visual antigo.

Por que a linha alternativa importa mais do que parece

Um navegador que não entende `in oklch` não ignora só essa palavra: ele descarta a declaração inteira. Sem uma alternativa, o resultado não é um gradiente um pouco diferente, mas gradiente nenhum, e aparece a cor de fundo que estiver por baixo. Por isso, o CSS copiado sempre traz duas linhas de `background-image`. A primeira é a alternativa: dezesseis paradas intermediárias calculadas aqui no espaço escolhido e escritas como hex sRGB simples, que se aproximam da mesma curva o bastante para que a maioria das pessoas não perceba a diferença. A segunda é a versão moderna em uma linha só, que qualquer navegador capaz de entendê-la aplica por cima.

Gradientes repetidos e o caso especial do cônico

Um gradiente repetido aplica a sequência de paradas várias vezes seguidas, como ladrilhos, o que só funciona se a última parada ficar abaixo de 100%. Caso contrário, não sobra nada para repetir, e o resultado fica idêntico à versão simples. Esse caso é detectado antes de você copiar qualquer coisa. O gradiente cônico tem uma limitação própria na exportação: o SVG 1.1 não tem nenhum elemento de gradiente cônico, então o botão de SVG avisa isso e indica o PNG, que é desenhado como 720 fatias de meio grau para funcionar nas versões antigas do Safari.

Tudo é calculado nesta aba

A interpolação de cores, o texto CSS, o código SVG e o PNG são todos gerados localmente, com JavaScript e canvas. Nada do seu gradiente é enviado, e nenhuma imagem vai para lugar nenhum para ser renderizada. Feche a aba, e não fica nada para trás.

Perguntas frequentes

Por que interpolar um gradiente em OKLCH?

Porque a interpolação em sRGB tira a saturação do meio de um gradiente entre matizes distantes e cria uma faixa cinza. O OKLCH é perceptualmente uniforme, então o ponto médio mantém o croma e a rampa de brilho parece regular.

Por que preciso da linha alternativa?

Um navegador que não aceita a sintaxe `in <space>` descarta a declaração inteira, não só a parte desconhecida. A alternativa é uma aproximação simples em sRGB escrita antes, para que esses navegadores ainda mostrem um gradiente.

Como fazer um gradiente repetido?

Ative a opção de repetição e leve a última parada para baixo de 100%, por exemplo para 20%. A sequência de paradas passa então a se repetir ao longo do elemento. Com a última parada em 100%, não há nada para repetir, e você recebe um aviso em vez de um resultado idêntico sem explicação.

Por que não há SVG para gradiente cônico?

O SVG 1.1 só define gradientes lineares e radiais; não existe elemento cônico. Imitar um com centenas de fatias geraria um arquivo que ninguém conseguiria editar, então a exportação em SVG é recusada para o cônico e o PNG é oferecido no lugar.

Posso fazer um gradiente que termina em transparente?

Sim. Na parada que deve sumir aos poucos, use uma notação de cor com alfa, como um hex de oito dígitos ou rgba(). Tanto o CSS quanto o PNG preservam a transparência.

Em que tamanho devo baixar um fundo?

Para um fundo de tela cheia, 1920 pixels de largura costumam bastar, e gradientes comprimem muito bem. Acima de 2048 só vale a pena para impressão. Se for usar na web, prefira o CSS: são poucas centenas de bytes, e ele se adapta a qualquer tamanho.

O Safari aceita esses gradientes?

O Safari 16.4 e as versões posteriores entendem espaços de interpolação. As versões anteriores usam a linha em sRGB, e é exatamente por isso que ela está ali. Gradientes cônicos em CSS funcionam a partir do Safari 12.1, e a exportação em PNG os desenha como fatias para que até versões mais antigas mostrem tudo certo.