Gerador de gradiente mesh
Crie fundos CSS suaves no estilo mesh a partir de gradientes radiais em camadas. Arraste pontos de cor, defina o alcance, gere aleatoriamente com seed e copie CSS puro.
Configurações da malha
Pontos de cor
Pré-visualização
Arraste as alças na pré-visualização ou digite valores exatos.
background-color: #ff99cc; background-image: radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%), radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%), radial-gradient(at 100% 100%, #baffc9 0, transparent 50%), radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);
Ferramentas Relacionadas
Ver TodasO que é Gerador de gradiente mesh?
Cria o popular visual suave de “gradiente mesh” com CSS puro: uma cor de fundo mais vários gradientes radiais, cada um partindo de um ponto de cor e sumindo até ficar transparente. Você posiciona até oito pontos arrastando-os na prévia ou digitando a posição.
Como usar Gerador de gradiente mesh
- Escolha uma cor de fundo.
- Selecione um ponto de cor e defina a cor, o alcance e a posição X / posição Y, ou arraste o ponto na prévia.
- Use Adicionar ponto / Remover ponto para mudar quantas cores se misturam (1 a 8).
- Clique em Aleatório para um novo mesh, ou informe uma seed e aplique-a para obter um resultado reproduzível.
- Copie o código CSS.
Exemplo
Default 4 points, background #ff99cc
background-color: #ff99cc; background-image: radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%), radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%), radial-gradient(at 100% 100%, #baffc9 0, transparent 50%), radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);
Quando usar Gerador de gradiente mesh
Use-o para fundos de destaque, landing pages, telas de abertura de apps e fundos coloridos desfocados atrás de cards com glassmorphism. Se precisar de transições de cor retas e precisas, use o Gerador de gradiente CSS; para deformações de malha reais, você precisa de uma ferramenta vetorial ou de um shader canvas/WebGL.
Como funciona Gerador de gradiente mesh
Cada ponto vira radial-gradient(at x% y%, color 0, transparent spread%) e todos são listados em background-image acima do background-color. Como cada gradiente termina transparente, as cores se sobrepõem e se misturam suavemente. O modo aleatório usa um gerador pseudoaleatório com seed (mulberry32): a mesma seed e o mesmo número de pontos sempre produzem as mesmas cores e posições. É uma aproximação de gradientes mesh de verdade (que o CSS não tem), não uma malha de patches bilineares.
Casos de Uso Comuns
- Fundos de destaque de landing pages
- Fundos para cards com glassmorphism
- Placeholders coloridos para capas de blog
- Telas de onboarding de apps
- Fundos reproduzíveis via seeds em design systems
Perguntas Frequentes
É um gradiente mesh de verdade?
Nenhuma propriedade CSS desenha gradientes mesh reais. Empilhar gradientes radiais que terminam transparentes é a técnica CSS padrão e produz um visual suave muito parecido.
O que o alcance faz?
É a distância (em porcentagem do elemento) em que a cor de um ponto desaparece por completo. Valores maiores fazem a cor cobrir uma área maior.
Posso obter o mesmo mesh aleatório de novo?
Sim. Anote o valor da seed e aplique-a depois; a mesma seed com o mesmo número de pontos recria o mesmo mesh.