Mesh gradient generator com CSS e SVG
Escolha de 2 a 8 cores e este mesh gradient generator as mistura em um fundo suave e contínuo, que você molda arrastando os pontos de cor. Copiar CSS entrega um gradiente em CSS que funciona em qualquer navegador moderno, e Baixar SVG um arquivo de 1600 × 1200 que escala para qualquer tamanho. Tudo roda no seu navegador, sem WebGL, sem envio de arquivos e sem conta.
Gerador de gradiente, passo a passo
- Olhe a pré-visualização. Os pequenos pontos redondos nela são os pontos de cor, um para cada mancha de cor da malha.
- Pressione Aleatório para obter uma nova paleta e um novo arranjo ao acaso, quantas vezes quiser, até algo ficar parecido com o que você procura.
- Abra a linha Cores e clique em uma amostra para escolher a sua própria cor. Adicionar cor inclui mais cores (até 8), e o pequeno x de uma amostra remove uma (até sobrarem 2).
- Mova o controle deslizante Complexidade, de 2 a 6, para mudar quantos pontos de cor a malha tem.
- Arraste um ponto para movê-lo, com o mouse ou com o dedo. No teclado, selecione um ponto e use as setas; segure Shift para passos maiores.
- Pressione Copiar CSS ou Baixar SVG quando a pré-visualização estiver boa. Um aviso curto, Copiado ou Salvo, confirma a ação.
A pré-visualização se atualiza a cada mudança, e a caixa Código CSS sempre mostra o CSS exato do que você vê. Mudar a complexidade ou pressionar "Aleatório" reorganiza os pontos, então os que você tinha arrastado voltam para posições novas.
O que a complexidade faz
A complexidade cria uma grade de complexidade × complexidade pontos de cor, e cada ponto recebe uma cor da sua paleta. Mais pontos dão uma malha mais variada, com manchas menores; menos pontos dão faixas largas e simples.
- Complexidade 2: 4 pontos, cada mancha ocupa 65% da tela
- Complexidade 3: 9 pontos, 43%
- Complexidade 4: 16 pontos, 33%
- Complexidade 5: 25 pontos, 26%
- Complexidade 6: 36 pontos, 22%
Um detalhe: as cores são distribuídas entre os pontos, então uma paleta pode ter mais cores do que a malha tem pontos. Com complexidade 2 há só 4 pontos, e uma paleta de 6 cores mostra no máximo 4 ao mesmo tempo. Aumente a complexidade para as demais aparecerem.
Mesh gradient CSS para colar
A caixa Código CSS traz duas declarações: um background-color (a média da sua paleta, para que nenhum canto fique vazio) e um background-image que empilha um radial-gradient() para cada ponto de cor. É CSS comum, sem arquivo de imagem nem script.
Cada camada vai de uma cor sólida no centro até a transparência total na borda, e as camadas se sobrepõem, o que faz as cores se misturarem. Tamanho e posição são porcentagens, então o gradiente se estica para caber no elemento em que você o aplicar. Se você procura um gerador de gradiente CSS, este entrega o código pronto para copiar.
Mesh gradient SVG: o download
Baixar SVG salva gradiente-mesh.svg. O arquivo tem viewBox de 1600 × 1200, um retângulo de base na mesma cor média e um radialGradient para cada ponto de cor. Por ser vetorial, continua nítido como papel de parede de celular, fundo de slide ou imagem de post em rede social. Em um quadro que não seja 4:3, ele preenche o quadro e corta as bordas em vez de esticar.
Se precisar de um PNG, abra o SVG em um navegador ou editor que leia SVG e exporte no tamanho que quiser.
Usando o gradiente como fundo
- Site ou seção hero: cole o CSS na regra desse elemento. Texto sobre uma mistura agitada de cores pode ficar difícil de ler, então teste com o Verificador de Contraste de Cores.
- Slides, papéis de parede e posts: baixe o SVG e posicione ou exporte a partir do seu app de design.
- Combinar com uma marca: clique em uma amostra e escolha a sua cor. O Seletor de Cores de Imagem pode antes tirar uma cor de uma foto ou logo.
As duas saídas são um instantâneo da pré-visualização atual. Se você misturar de novo ao acaso, copie ou baixe outra vez para obter a nova versão.
Perguntas frequentes
Existe um mesh gradient css generator que me dê o CSS?
Sim, este. A caixa "Código CSS" mostra um background-color mais um background-image formado por camadas radial-gradient() empilhadas, uma por ponto de cor. É CSS padrão, sem JavaScript nem arquivo de imagem, e funciona em qualquer navegador moderno. Pressione "Copiar CSS" e cole em uma folha de estilo ou em um atributo style.
Posso baixar um mesh gradient como SVG?
Sim. "Baixar SVG" salva um arquivo com viewBox de 1600 × 1200. Ele é feito de camadas radialGradient, então continua nítido em qualquer tamanho. Em um quadro que não seja 4:3, preenche o quadro e corta as bordas em vez de esticar.
Como usar um mesh gradient como fundo de site?
Copie o CSS e cole as duas declarações na regra do elemento que você quer colorir, como uma seção hero ou o body. As manchas são posicionadas em porcentagens, então se esticam junto com o elemento. Confira se o seu texto continua legível sobre as cores escolhidas.
Posso obter um mesh gradient em PNG?
Não diretamente: esta ferramenta exporta CSS e SVG, não PNG. Abra o SVG baixado em um navegador ou editor que leia SVG e exporte ou tire uma captura de tela no tamanho em pixels de que você precisa.
Posso animar o mesh gradient?
Não. A ferramenta cria um único gradiente parado: você pode arrastar os pontos e trocar as cores, mas o CSS e o SVG exportados não se mexem.
É o mesmo que o gradiente de malha do Illustrator?
Não. O gradiente de malha do Illustrator é uma grade de retalhos vetoriais editáveis. Este gerador mistura gradientes radiais suaves e sobrepostos, um por ponto de cor, o que dá um visual liso e multicolorido parecido, mas exporta como CSS ou SVG simples.
Onde encontro um gerador de degradê online?
Esta ferramenta é uma delas, voltada para degradês em malha: você escolhe de 2 a 8 cores e recebe o CSS de um fundo suave. Para uma transição simples entre duas cores existem outras ferramentas; aqui o resultado é uma malha sem imagens para hospedar.
