O que esta ferramenta faz
Um gradiente CSS é um fundo que passa aos poucos de uma cor para outra e é escrito como texto, não como imagem. Esta ferramenta deixa você montá-lo olhando: escolha linear, radial ou cônico, coloque as paradas de cor numa barra e o CSS aparece logo abaixo, pronto para copiar. O mesmo gradiente pode ser salvo como PNG de até 4096 pixels por lado, útil para uma imagem de rede social, um papel de parede ou um protótipo. Nada é enviado: o gradiente é desenhado no seu navegador.
Linear, radial e cônico
Um gradiente linear segue uma linha. O ângulo é medido no sentido horário a partir do topo: 0deg aponta para cima, 90deg para a direita e 180deg para baixo. O valor inicial aqui é 135deg, do canto superior esquerdo ao inferior direito. Você também pode usar palavras como to right. Um canto não é um ângulo fixo: num quadrado to top right equivale a 45deg, mas numa caixa de 200 por 100 pixels o navegador o transforma em cerca de 26,57deg, para que os dois cantos que não são o destino tenham exatamente a cor do meio.
Um gradiente radial se espalha a partir de um centro. A forma é círculo ou elipse e o tamanho diz onde cai a última parada: o lado ou o canto mais próximo ou mais distante. Sem tamanho, o CSS usa uma elipse que alcança o canto mais distante.
Um gradiente cônico gira em torno de um centro como os ponteiros de um relógio. As posições são medidas na volta inteira, então 25% é um quarto de volta. É o jeito usual de desenhar um gráfico de pizza ou uma roda de cores só com CSS.
Paradas, bordas duras e repetição
Cada parada tem uma cor e uma posição, de 0% a 100%. Duas paradas na mesma posição criam uma borda dura em vez de uma mistura, e assim se fazem listras. O modelo Listras é repeating-linear-gradient(45deg, #fde68a 0%, #fde68a 10%, #f59e0b 10%, #f59e0b 20%): uma faixa amarela e uma laranja que somam 20% da linha. Numa caixa de 100 por 100 pixels a linha tem 141,42 pixels, então o padrão se repete a cada 28,28 pixels.
Se as paradas estiverem fora de ordem, o navegador sobe uma parada anterior até a posição da que a precede. Esta ferramenta evita a surpresa escrevendo sempre as paradas ordenadas por posição.
A opacidade faz parte de cada parada. Os navegadores misturam com o alfa pré-multiplicado, então ir de vermelho a totalmente transparente mantém o vermelho e só o deixa menos visível: no meio é vermelho com 50% de opacidade, não um vermelho escuro apagado. O PNG segue a mesma regra. Uma cor opaca é escrita #rrggbb; com transparência você pode escolher um hex de oito dígitos como #ff000080 ou rgba(255, 0, 0, 0.5), que significam o mesmo.
Prefixos, PNG e o que vale saber
Os navegadores atuais entendem linear-gradient() e radial-gradient() sem prefixo há mais de uma década, então o código não precisa da versão -webkit-. O conic-gradient() é mais recente (Chrome 69, Safari 12.1 e Firefox 83) e é aceito por todos os navegadores atuais. O PNG é pintado num canvas com as mesmas paradas, por isso coincide com a prévia. Para sombras que combinem com o gradiente, veja o gerador de sombras; para conferir a legibilidade do texto, as ferramentas de cor.
