Gerador de mesh gradient
Gere um degradê mesh colorido com vários pontos diretamente no canvas, sem precisar importar uma imagem. Ajuste o número de pontos e suas cores e depois exporte o resultado em PNG ou copie o CSS equivalente.
Como funciona
Cada ponto colorido age como uma fonte de influência: para cada pixel do canvas, a cor final é uma média ponderada das cores de todos os pontos, com peso maior quanto mais próximo o ponto estiver (ponderação pelo inverso da distância). O resultado é um degradê suave e orgânico entre as cores escolhidas.
O CSS copiado terá exatamente o mesmo resultado que o PNG?
Não. O CSS gerado usa uma sobreposição de degradês radiais CSS nativos, que dá um resultado próximo, mas não idêntico pixel a pixel à interpolação por inverso da distância calculada no canvas. É uma aproximação leve e fiel, que pode ser usada diretamente como plano de fundo em um site.
Por que o resultado muda a cada clique em "Posições aleatórias"?
As posições dos pontos são sorteadas aleatoriamente dentro dos limites do canvas a cada geração. Combinado com as cores que você escolhe, isso permite explorar rapidamente muitas variações de mesh gradient sem posicionar os pontos manualmente.
Toda a renderização é calculada localmente no seu navegador: nenhum dado é enviado a um servidor, mesmo que você não forneça nenhuma imagem.