gradientes em CSS e SVG
Um gradiente CSS não é uma imagem, é uma função que descreve como interpolar cor ao longo de um eixo (linear), de um centro (radial) ou de um ângulo (cônico), e a escolha do espaço de interpolação muda o resultado visual mais do que a maioria percebe.
Sem a cláusula "in", a mistura roda em sRGB; como as duas cores não são extremamente saturadas ao mesmo tempo, esse par específico não cai na faixa cinza.
A cláusula "in oklch" força a interpolação perceptual entre as três paradas, evitando qualquer meio-tom acinzentado entre as duas primeiras cores, que sozinhas já seriam candidatas à faixa cinza em sRGB.
Quando a parada em 0% e a parada em 100% têm a mesma cor, o círculo fecha sem descontinuidade; se fossem cores diferentes, apareceria uma "costura" visível exatamente na junção dos 0 e 360 graus.
Sim. Ela monta os três tipos definidos na especificação CSS, linear-gradient(), radial-gradient() e conic-gradient(), mais as variantes repeating- de cada um, e entrega o código pronto para colar. Você controla o ângulo, o centro, a forma e o tamanho, adiciona quantas paradas quiser e ajusta cor, posição e opacidade de cada uma.
Porque a interpolação linear padrão em sRGB mistura os canais R, G e B em linha reta, e essa linha reta pode atravessar uma região de baixa saturação do espaço de cor mesmo quando as duas pontas são bem saturadas. Trocar o espaço de interpolação para oklab ou oklch, que seguem uma curva mais próxima da percepção humana, evita esse vale.
Linear segue um eixo reto num ângulo fixo, radial se espalha de um ponto central em círculo ou elipse até uma borda definida (mais próxima, mais distante, do lado ou do canto), e cônico gira ao redor de um ponto como ponteiros de relógio, o único dos três que pode formar um círculo completo de cor sem repetir.
É a cláusula de espaço de interpolação do CSS Color 4: em vez de misturar cores em sRGB (o padrão), o navegador calcula os passos intermediários em OKLCH, um espaço perceptualmente mais uniforme, o que costuma evitar faixas acinzentadas e produzir transições mais parecidas com o que o olho espera.
Não diretamente: SVG define gradientes como elementos próprios, `<linearGradient>` com atributos x1/y1/x2/y2 e `<radialGradient>` com cx/cy/r, cada um contendo filhos `<stop offset="..." stop-color="..." stop-opacity="...">`, em vez da sintaxe compacta de função usada em CSS; o conceito de paradas de cor é o mesmo, a sintaxe de marcação é diferente.
background-image: linear-gradient(135deg, #3DDC97 0%, #2563EB 100%);O CSS e o PNG são gerados localmente no navegador.