Ir para o conteúdo
FreeKitX

Gerador de Gradientes de Malha

Adicionar esta ferramenta aos favoritos

Salve esta página no navegador

No celular, escolha Adicionar aos favoritos no menu ou nas opções de compartilhamento do navegador.

Gere gradientes de malha fluidos com pontos de cor interativos, sementes aleatórias reproduzíveis e exportação em resolução 4K.

Gerador de Gradientes de Malha e Papéis de Parede

Grátis · Processamento local

Gere gradientes fluidos com pontos de controle interativos, sementes e exportação em 4K.

Tela de Gradiente ao Vivo
Tela Interativa

Arraste os pontos ou utilize as setas do teclado / controles deslizantes para reposicionar.

1
2
3
4

Predefinições de Design

Controles de Gradiente de Malha

Personalize semente, pontos de controle, desfoque e cor de fundo em tempo real.

Número de Pontos: 4 / 6

Mínimo de 4 pontos de controle obrigatório.

#2beeb3
#0f172a
50 px
px

Ajuste a intensidade do desfoque para transições mais suaves entre os pontos de cor.

Configurações Avançadas

Use uma semente numérica para reproduzir de forma determinística o mesmo gradiente.

Punto Selecionado: point-1
21 %
%
34 %
%

Exportar e Baixar

Variante CSS

Declarações de fundo padrão sem desfoque de filtro. Seguro para qualquer elemento.

background-color: #0f172a;
background-image:
    radial-gradient(at 21% 34%, #2beeb3 0px, transparent 55%),
    radial-gradient(at 73% 26%, #3c5bf6 0px, transparent 55%),
    radial-gradient(at 37% 67%, #ea62ad 0px, transparent 55%),
    radial-gradient(at 68% 70%, #f6ec60 0px, transparent 55%);

Ferramentas relacionadas

Resposta direta

Um gradiente de malha (mesh gradient) é um efeito visual contemporâneo que combina múltiplos pontos de cor radiais em um plano bidimensional, criando transições fluidas e orgânicas sem eixos lineares rígidos.

Como usar esta ferramenta

1

Posicionar pontos de cor e predefinições

Arraste de 4 a 6 pontos de controle na tela ou escolha uma predefinição para estabelecer a paleta cromática principal.

2

Ajustar suavidade e semente aleatória

Modifique o raio de desfoque para transições mais suaves ou insira uma semente numérica para reproduzir fielmente a composição.

3

Copiar CSS ou exportar papel de parede

Copie declarações de fundo leves, obtenha regras CSS completas isoladas ou baixe imagens PNG em alta resolução até 4K.

Implementação CSS de gradientes de malha: Apenas Fundo vs CSS Completo

Gradientes de malha nativos do navegador são construídos sobrepondo múltiplas camadas de radial-gradient() sobre uma cor de fundo sólida. O modo «Apenas fundo» gera declarações limpas sem filtros de desfoque a nível de elemento, sendo seguro para qualquer elemento estrutural. O modo «CSS completo» aplica o filtro de desfoque em um pseudoelemento ::before isolado com margem expandida, garantindo que textos, links e botões internos continuem nítidos e clicáveis.

background-image: radial-gradient(at x1 y1, c1, transparent r1), radial-gradient(at x2 y2, c2, transparent r2);
  • Apenas fundo: Gradientes radiais sobrepostos leves e sem desfoque de elemento; seguro para qualquer recipiente.
  • CSS completo: Pseudoelemento ::before isolado com filtro blur; elementos filhos preservam nitidez e interatividade.
  • Semente determinística: Algoritmo Mulberry32 PRNG garante a reprodução idêntica de coordenadas e paletas.

Perguntas frequentes

Como funcionam os gradientes de malha em CSS puro sem carregar imagens?

Eles combinam múltiplas declarações radial-gradient() com paradas transparentes sobre uma cor base sólida. O motor de renderização do navegador interpola as bordas transparentes sobrepostas gerando transições suaves e fluidas.

Qual é a diferença prática entre os modos «Apenas fundo» e «CSS completo»?

«Apenas fundo» gera propriedades de fundo convencionais sem filtros, sendo seguro para qualquer elemento HTML. «CSS completo» utiliza um pseudoelemento ::before isolado com filtro blur, proporcionando difusão visual aprofundada sem desfocar textos ou botões filhos.

Quais são as limitações de desempenho e do navegador?

Sobrepor muitos gradientes radiais com filtros de desfoque pesados pode aumentar o custo de repintura durante rolagens rápidas em dispositivos móveis de baixo desempenho. Além disso, exportar papéis de parede em 4K é processado localmente no Canvas e pode demandar alguns segundos em hardwares mais antigos.

Os gradientes criados ou imagens exportadas são enviados a algum servidor?

Não. Todos os cálculos matemáticos, manipulação de sementes PRNG, geração de código CSS e renderização Canvas ocorrem 100% no seu navegador de forma estritamente local.

Referências e normas oficiais