Gerador de gradientes CSS

O que é um gerador de gradientes CSS

Um gerador de gradientes CSS transforma duas cores numa declaração `background-image` que pode colar na sua folha de estilos. Escolhe as cores, a forma — linear, radial ou cónica — e a direção, e ele escreve a regra. Não se exporta imagem nenhuma: um gradiente CSS é desenhado pelo navegador ao tamanho que o elemento tiver, por isso mantém-se nítido e não custa largura de banda.

O que quase todos os geradores deixam de fora é o espaço de interpolação. O CSS Color 4 permite que um gradiente diga por que espaço de cor o navegador deve viajar — `linear-gradient(90deg in oklch, ...)` — e essa escolha muda o meio do gradiente muito mais do que o ângulo alguma vez mudará. Está disponível em todos os navegadores principais desde maio de 2023.

Este gerador torna essa decisão visível em vez de a tomar por si: as suas duas cores aparecem em simultâneo nos três espaços, cada um com a medição do que custa.

Como usar o gerador de gradientes

1. Escolha as duas cores. Use o seletor para as escolher ou escreva diretamente um valor hexadecimal. A pré-visualização e o CSS atualizam-se à medida que avança, sem qualquer botão.
2. Escolha a forma e o espaço de interpolação. Linear, radial ou cónico, com um controlo de ângulo para os dois primeiros. Depois sRGB, Oklab ou Oklch: o painel comparativo em baixo mostra os três para as suas cores de qualquer modo, para que veja entre o que está a escolher.
3. Copie a declaração. Obtém uma regra `background-image:` completa com o espaço de interpolação escrito de forma explícita, mesmo em sRGB, onde é o valor por omissão: uma regra que alguém vai colar e ler mais tarde deve dizer o que faz.

«Use oklab nos gradientes» é meia verdade

O conselho habitual diz que os gradientes em sRGB ficam turvos a meio e que o Oklab resolve isso. A primeira metade é verdade. A segunda está ao contrário, e é fácil de medir.

Pegue em azul e amarelo. Interpolado em sRGB, o ponto médio é #7F7F7F: não turvo, literalmente cinzento, com uma croma medida de zero. Em 15 000 pares aleatórios saturados e de matiz quase oposta, o sRGB perde uma mediana de 75,8% da cor dos extremos no ponto médio, e 13,73% desses pontos médios saem praticamente cinzentos. O Oklab não resolve: piora, com uma perda mediana de 83,3% e 22,99% de pontos médios cinzentos, quase o dobro.

A razão é estrutural, não uma esquisitice. O sRGB e o Oklab são espaços retangulares, por isso interpolar é traçar uma reta entre dois pontos, e a reta entre duas matizes opostas passa pelo eixo neutro a meio do caminho. O Oklch é polar: interpola um ângulo de matiz, pelo que nunca tem de atravessar o meio. Medido nos mesmos 15 000 pares, perde 14,6%, e pontos médios cinzentos acontecem 0,00% das vezes.

Então para que serve o Oklab, afinal? Para uma rampa uniforme de luminosidade percebida, onde ganha com clareza. Em 15 000 pares aleatórios, o pior desvio face a uma rampa reta de luminosidade é uma mediana de 8,60% no sRGB contra 0,70% no Oklab — mais de dez vezes melhor — e no percentil 90 é de 44,68% contra 2,53%. É isso o banding que se vê num gradiente longo em sRGB, e o Oklab é a resposta certa para esse problema.

Duas queixas, duas soluções diferentes, e o conselho que resolve uma piora a outra. O Oklch fica pelo meio na luminosidade (uma mediana de 1,25%) mantendo a cor, e é por isso que esta página o traz por omissão; mas o painel mostra os três, porque a resposta certa depende das suas duas cores e não de uma regra geral.

Limitações assumidas

A pré-visualização é CSS real. A interpolação é feita pelo navegador, por isso o que vê é o que os seus visitantes verão, e esta página nunca tem de afirmar que o seu próprio desenho coincide com o do navegador. A tira comparativa é a exceção: aquelas três barras são desenhadas a partir de 21 paragens calculadas, para que os espaços possam ser comparados mesmo num navegador anterior a esta sintaxe, pelo que são uma aproximação fiel da versão suave e não a versão suave.

Este gerador trabalha com duas paragens de cor, não com uma lista arbitrária. É propositado: a questão da interpolação é sobre o que acontece entre um par, e as medições acima só estão definidas para um par. Se precisar de um gradiente com várias paragens, a sintaxe CSS aceita mais paragens exatamente na mesma forma, e a palavra-chave do espaço funciona da mesma maneira.

Os números desta página vêm de pares de cores aleatórios, que é a forma justa de comparar três espaços mas não é como alguém escolhe cores. O seu par pode comportar-se de maneira bem diferente, e é precisamente por isso que o painel mede o seu em vez de lhe recitar uma média. Duas matizes parecidas quase não diferem entre espaços; duas matizes opostas diferem imenso.

A croma e a luminosidade são aqui medidas em Oklab, uma escolha que por construção favorece o resultado de luminosidade do Oklab, já que é avaliado na sua própria escala. É também a escala que o próprio CSS usa hoje, e o resultado da croma vai contra o Oklab e não a favor, pelo que esse enviesamento não explica o achado.

As conversões de cor são verificadas contra uma implementação independente da mesma especificação em 20 000 cores, concordando melhor do que uma parte por milhão, a par de 26 verificações que cobrem as idas e voltas, a regra do arco de matiz mais curto e os números publicados acima.

Porque é gratuito

Aqui é tudo aritmética e um atributo `style`, a correr no seu navegador enquanto escreve. Não é enviada nenhuma cor, não há conta e não há limite de exportações: o resultado são três linhas de CSS que podia ter escrito você mesmo.

Também não há marca de água, o que num gradiente não é grande promessa, nem uma versão paga a reter o painel comparativo: esse painel é a razão de ser da página.