Gerador de Mesh Gradient

Crie mesh gradients com pontos de cor arrastáveis

Os mesh gradients misturam muitas cores numa superfície com transições suaves e orgânicas. Tornaram-se presença constante em fundos de destaque, telas de abertura de aplicativos e capas de música, porque transmitem mais riqueza do que um simples gradiente linear de duas cores. Este gerador de mesh gradient permite colocar entre três e seis pontos coloridos diretamente na tela, arrastá-los para a posição desejada e ver a mistura atualizar-se instantaneamente.

Como funciona em CSS puro

Os navegadores não suportam verdadeiros mesh gradients, mas é possível aproximá-los sobrepondo vários fundos radial-gradient(). Cada camada fica centrada num dos pontos e desvanece da cor do ponto até uma versão totalmente transparente da mesma cor, e todas as camadas ficam por cima de uma background-color de base. As transições sobrepostas misturam as cores suavemente, o que cria o efeito mesh. O CSS gerado é uma única declaração sem imagens, por isso carrega instantaneamente e adapta-se a qualquer tamanho de elemento.

Desvanecer para rgba() com alfa zero, em vez de usar a palavra-chave transparent, evita as franjas cinzentas que podem aparecer em alguns renderizadores e também permite reproduzir exatamente o mesmo gradiente num canvas HTML para a exportação em PNG.

Desfoque, ruído e paletas

A barra de desfoque adiciona um filter: blur() de CSS para um visual ainda mais suave, e a barra de ruído sobrepõe uma textura SVG de ruído fractal que acrescenta um grão subtil e reduz o efeito de faixas de cor em superfícies grandes. O botão Random palette escolhe um conjunto harmonioso de tons com saturação e luminosidade equilibradas, e Random layout também reorganiza os pontos. Quando estiver satisfeito com o resultado, copie o CSS para a sua folha de estilos ou faça o download de um PNG de 1600 por 900 pixels. Tudo é gerado localmente no navegador e nada é enviado.