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 nossos servidores. 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 pelo nossos servidores nem aparece nas URLs do funil.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Conversor de Binário para ASCII

Cole binário (bytes separados por espaço ou um longo fluxo de bits) e obtenha o texto ASCII que ele representa. Lida com codificações de 7 bits e 8 bits.

Gerador de Paletas de Cores

Gere paletas monocromáticas, análogas, complementares, triádicas ou tetrádicas a partir de uma cor base HEX e exporte variáveis CSS prontas para copiar.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Simplificador de Álgebra Booleana

Simplifique expressões booleanas usando mapas de Karnaugh e o algoritmo de Quine-McCluskey. Mostra cada passo de minimização e uma forma final SOP/POS.

Conversor de BBCode para HTML

Converta BBCode (marcação de fórum) para HTML limpo. Lida com tags de formatação, listas, citações, código, imagens, links e tabelas.