Gerador de gradiente mesh
Crie gradientes mesh fluidos em WebGL — exporte como CSS ou imagem
Gradiente mesh
5 pontosCores
Distorção
Filtros
Como o gerador de gradiente mesh funciona
Crie gradientes mesh fluidos em WebGL. Posicione os pontos de cor, misture-os suavemente e exporte como CSS ou imagem em alta resolução.
Renderização em WebGL
Os gradientes mesh são renderizados em WebGL, para misturar vários pontos de cor de forma suave e com alto desempenho. O resultado é fluido e orgânico — impossível de conseguir com gradientes CSS comuns.
Arraste os pontos de cor
Posicione os pontos de cor em qualquer lugar da tela arrastando. Cada ponto espalha a sua cor ao redor e se mistura suavemente com os vizinhos, criando transições naturais.
Exporte como imagem
Baixe o gradiente mesh como imagem PNG em alta resolução. Use como fundo de seção hero, arte para redes sociais ou recurso de design em qualquer ferramenta.
Fundo em CSS
Exporte o gradiente como um fundo CSS que reproduz o efeito mesh com gradientes radiais sobrepostos. Cole na sua folha de estilos para ter uma versão leve, só com CSS.
Perguntas frequentes
Um gradiente mesh mistura várias cores a partir de pontos espalhados por uma superfície, criando transições suaves e orgânicas. Ao contrário dos gradientes lineares ou radiais, que seguem uma única direção, o gradiente mesh flui naturalmente entre qualquer número de pontos de cor.
Ainda não existem gradientes mesh nativos em CSS. Esta ferramenta gera uma aproximação com gradientes radiais sobrepostos que imita bem o visual. Para um resultado perfeito até o pixel, exporte como imagem PNG e use como fundo.
Quantos você precisar. Cada ponto se mistura com os vizinhos. Menos pontos criam gradientes amplos e simples; mais pontos permitem campos de cor complexos e detalhados.
A tela usa WebGL para uma interpolação mesh de verdade, enquanto a exportação em CSS faz uma aproximação com gradientes radiais sobrepostos. O resultado é parecido, mas não idêntico — quando a precisão for essencial, exporte em PNG.