Softonic

Gerador de gradiente em malha

Crie um fundo multicolorido suave com 4, 6 ou 9 pontos móveis. Escolha a cor de cada ponto, arraste-os pela tela, experimente uma paleta aleatória selecionada e exporte o resultado em SVG ou PNG. Você também pode copiar uma aproximação em CSS feita com gradientes radiais sobrepostos. O projeto permanece nesta aba do navegador enquanto você trabalha.

Como criar um gradiente com efeito de malha

  1. 1

    Escolha a grade

    Comece com 4, 6 ou 9 pontos de controle. Mais pontos criam mais regiões de cor.

  2. 2

    Escolha as cores

    Use o seletor de cada ponto. O editor armazena cores HEX de seis dígitos.

  3. 3

    Mova os pontos

    Arraste um ponto, digite sua posição horizontal e vertical ou use as teclas de seta.

  4. 4

    Escolha o tamanho

    Selecione um formato paisagem, widescreen ou quadrado para os arquivos SVG e PNG.

  5. 5

    Exporte o projeto

    Baixe o PNG ou SVG ou copie a aproximação CSS com gradientes radiais.

Como os três formatos são gerados

  • PNG usa a mesma mistura de cores por distância da prévia. Se o formato escolhido tiver outra proporção, os mesmos pontos relativos serão adaptados às novas dimensões.
  • SVG sobrepõe gradientes radiais nos mesmos pontos de controle e continua nítido ao ser ampliado.
  • CSS cria uma camada radial-gradient() para cada ponto sobre uma cor de base, sem precisar de um arquivo de imagem separado.

SVG e CSS usam os mesmos dados do projeto, mas são aproximações leves do efeito de malha. Seus pixels não serão idênticos aos do PNG.

Dicas para a paleta

  • Tons próximos costumam produzir transições suaves.
  • Tons contrastantes deixam os limites entre as regiões mais marcados.
  • As paletas aleatórias são pontos de partida, não garantias de legibilidade.
  • Confira o contraste de textos, ícones e controles aplicados sobre o fundo.

Posicionamento dos pontos

Arraste um ponto numerado na prévia ou coloque o foco nele e use as setas. Segure Shift para movê-lo em cinco pontos percentuais. Os campos horizontal e vertical oferecem outra forma de inserir a posição com precisão.

Os pontos podem chegar às bordas. Agrupar vários concentra suas cores em uma região; separá-los dá mais espaço para cada cor.

Usos comuns

  • Fundos de cabeçalhos e divisores de seção.
  • Cards para redes sociais e miniaturas de vídeo.
  • Planos de fundo para apresentações e ilustrações.
  • Telas de abertura e painéis decorativos.

O PNG é o formato mais fiel à prévia. Use SVG para redimensionar com nitidez ou CSS para manter o fundo editável sem uma imagem separada.

Privacidade e armazenamento

Cores, posições e resolução permanecem na memória do navegador e no sessionStorage. Elas não são incluídas nas URLs do funil nem no estado do servidor. A ferramenta pode registrar que uma exportação ocorreu, sem incluir nenhum valor do projeto.

O projeto pode ser restaurado do sessionStorage por até seis horas enquanto a aba atual estiver aberta. Fechar a aba costuma apagá-lo antes, portanto baixe ou copie o que deseja guardar.

Perguntas frequentes

Eles usam métodos de renderização diferentes. PNG mistura pixels pela distância, enquanto SVG e CSS sobrepõem gradientes radiais. As cores e posições são as mesmas, mas os pixels não são idênticos.

Sim. Arraste um ponto, use os campos de posição ou coloque o foco nele e pressione as setas. Segure Shift para movimentos maiores.

O editor armazena cores HEX de seis dígitos. Use o seletor ou converta RGB ou HSL para HEX antes.

Não. O CSS copiado aproxima o efeito ao empilhar gradientes radiais padrão.

Ele pode ser restaurado do sessionStorage por até seis horas na aba atual. Fechar a aba normalmente o remove antes. O projeto não passa pelos nossos servidores nem aparece nas URLs do funil.

Ferramentas relacionadas

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Ofuscador de JavaScript

Ofusque JavaScript com codificação de array de strings, renomeação de variáveis, achatamento de fluxo de controle e injeção de código morto para proteção do front-end.

Ferramenta disponível em outros idiomas