O que é Gerador de gradientes em malha?

Gere gradientes mesh multicoloridos para fundos de sites, gráficos de mídias sociais e designs de interface. Escolha as cores, posicione os pontos de controle e obtenha gradientes orgânicos que vão além de padrões lineares ou radiais simples.

A tela sobrepõe vários gradientes radiais, um por ponto de controle. Arraste um ponto para remodelar a mistura, troque a cor pela amostra e o código se atualiza ao vivo. Até seis pontos mantêm o resultado equilibrado. Exporte como PNG ou SVG em tamanhos de banner como 1920x1080, cole o SVG direto no Figma ou pegue o código em CSS, SCSS ou Tailwind.

Como usar

1. Escolha suas cores base clicando nas amostras de cor ou inserindo valores hexadecimais. Adicione ate 6 pontos de controle de cor.
2. Arraste os pontos de controle na tela para mudar o fluxo do gradiente.
3. Copie o código como CSS, SCSS ou Tailwind, ou baixe o gradiente como PNG ou SVG.

Quando usar

• Desenhar um fundo de hero que não pareça template.
• Compor capas de cards de produto ou playlist com cor mas sem foto.
• Gerar fundos para telas de carregamento e estados vazios em apps.

Resultado

Um designer de UI cria um gradiente mesh de roxo para turquesa com 4 pontos de controle para a secao hero de uma landing page e depois copia o CSS para colar diretamente em sua folha de estilos.

Perguntas frequentes

Qual é a diferença entre um mesh gradient e um gradiente linear?

Um gradiente linear mistura duas cores em um único eixo. O mesh gradient empilha várias manchas de cor suaves, então o resultado lembra uma aguada de aquarela mais do que uma transição limpa. Fica mais difícil ver a fronteira entre as cores.

Por que o CSS usa radial-gradient em vez de conic-gradient?

Radial-gradients empilhados têm o suporte de navegador mais amplo e degradam bem. O gerador emite um radial-gradient por ponto de controle e mistura via background-image, o que roda em todo navegador moderno sem polyfill.

O meu mesh gradient vai aparecer igual no Safari e no Chrome?

Sim. A saída usa o radial-gradient padrão do CSS, sem prefixos de fornecedor. Safari, Chrome, Firefox e Edge renderizam resultados idênticos. Navegadores antigos caem na primeira cor.

Quantos pontos de controle posso usar?

Até seis. Mais pontos costumam embaçar a mistura em vez de enriquecer. Dois ou três pontos rendem gradientes limpos estilo art déco; quatro a seis produzem aguadas mais pictóricas.

Posso exportar o gradiente como SVG?

Sim. A exportação SVG monta o gradiente com camadas de radial-gradient empilhadas, então ele aparece em qualquer lugar onde os gradientes CSS funcionem e cola direto no Figma como preenchimento de uma forma. O gradiente de malha SVG de verdade da especificação ainda não tem suporte em lugar nenhum, por isso essa abordagem empilhada é a versão que realmente funciona em qualquer lugar onde você colar.

Ferramentas relacionadas