Gerador de gradiente mesh

Crie um gradiente mesh estático ou animado com quatro manchas de cor sobre uma cor de base. Ajuste posição e alcance, escolha um preset ou gere uma combinação aleatória. Copie o CSS, as classes Tailwind ou o SVG e baixe um PNG estático; tudo é gerado no navegador.

Só local

AnimarAnime o gradiente com movimentos suaves. A preferência por movimento reduzido é respeitada.

Predefinições

Escolha uma predefinição para ajustar todos os controles de uma vez e depois refine.

Cor de fundo

Raio0px

Cores

Mancha 1

Posição 1 horizontal18%Posição 1 vertical22%Suavidade58%

Mancha 2

Posição 2 horizontal74%Posição 2 vertical30%Suavidade52%

Mancha 3

Posição 3 horizontal42%Posição 3 vertical78%Suavidade60%

Mancha 4

Posição 4 horizontal88%Posição 4 vertical82%Suavidade45%

Dica: arraste as alças numeradas na prévia para mover cada mancha. As setas ajustam, Shift acelera.

Uma predefinição ajusta todos os controles com um clique; Aleatório faz o mesmo com valores sorteados.

CSS

.mesh {
  background-color: #070b1a;
  background-image:
    radial-gradient(ellipse 45% 45% at 88% 82%, #0ea5e9 0%, rgb(14 165 233 / 0.55) 70%, rgb(14 165 233 / 0) 100%),
    radial-gradient(ellipse 60% 60% at 42% 78%, #a855f7 0%, rgb(168 85 247 / 0.55) 70%, rgb(168 85 247 / 0) 100%),
    radial-gradient(ellipse 52% 52% at 74% 30%, #22d3a5 0%, rgb(34 211 165 / 0.55) 70%, rgb(34 211 165 / 0) 100%),
    radial-gradient(ellipse 58% 58% at 18% 22%, #5b8cff 0%, rgb(91 140 255 / 0.55) 70%, rgb(91 140 255 / 0) 100%);
  border-radius: 0px;
}

O CSS são gradientes radiais empilhados: um por mancha, cada um esmaecendo até o transparente, sobre a cor de fundo. É por isso que não aparecem emendas: as manchas não se misturam, apenas se sobrepõem.

Classes do Tailwind

bg-[#070b1a] rounded-[0px] bg-[image:radial-gradient(ellipse_45%_45%_at_88%_82%,_#0ea5e9_0%,_rgb(14_165_233_/_0.55)_70%,_rgb(14_165_233_/_0)_100%),_radial-gradient(ellipse_60%_60%_at_42%_78%,_#a855f7_0%,_rgb(168_85_247_/_0.55)_70%,_rgb(168_85_247_/_0)_100%),_radial-gradient(ellipse_52%_52%_at_74%_30%,_#22d3a5_0%,_rgb(34_211_165_/_0.55)_70%,_rgb(34_211_165_/_0)_100%),_radial-gradient(ellipse_58%_58%_at_18%_22%,_#5b8cff_0%,_rgb(91_140_255_/_0.55)_70%,_rgb(91_140_255_/_0)_100%)]

Valores arbitrários, então cada número é exato — nenhum é arredondado para o passo de escala mais próximo.

Como funciona o Gerador de gradiente mesh?

Cada mancha é um gradiente radial elíptico. A posição é uma porcentagem da largura e da altura; o alcance define os raios em relação a cada uma dessas dimensões. A quarta mancha fica à frente das outras, e a cor de base aparece nas áreas que as manchas não cobrem.

As cores passam de opacas a transparentes. O código mantém os canais da própria cor no ponto com alfa zero. O CSS padrão também interpola gradientes com alfa pré-multiplicado: a palavra-chave `transparent`, por si só, não implica um halo cinza. A base e a sobreposição das manchas influenciam a mistura final.

A animação opcional move as manchas em um ciclo de 6 a 30 segundos. O CSS usa propriedades personalizadas registradas com `@property`; o SVG usa transformações. Os dois incluem uma regra para `prefers-reduced-motion`. O PNG exporta uma imagem estática da posição inicial.

A prévia e o PNG usam o mesmo SVG. O CSS reproduz as posições, as cores e a ordem das camadas. Animações de fundos grandes podem exigir mais processamento; teste no dispositivo de destino e confira o contraste do texto nas regiões claras e escuras.

Configurações do gradiente

Cor de fundo #070b1a
Mancha 1 #5b8cff · 18%, 22% · 58%
Mancha 2 #22d3a5 · 74%, 30% · 52%
Mancha 3 #a855f7 · 42%, 78% · 60%
Mancha 4 #0ea5e9 · 88%, 82% · 45%

CSS gerado

.mesh {
  background-color: #070b1a;
  background-image:
    radial-gradient(ellipse 45% 45% at 88% 82%,
      #0ea5e9 0%, rgb(14 165 233 / 0.55) 70%, rgb(14 165 233 / 0) 100%),
    radial-gradient(ellipse 60% 60% at 42% 78%,
      #a855f7 0%, rgb(168 85 247 / 0.55) 70%, rgb(168 85 247 / 0) 100%),
    radial-gradient(ellipse 52% 52% at 74% 30%,
      #22d3a5 0%, rgb(34 211 165 / 0.55) 70%, rgb(34 211 165 / 0) 100%),
    radial-gradient(ellipse 58% 58% at 18% 22%,
      #5b8cff 0%, rgb(91 140 255 / 0.55) 70%, rgb(91 140 255 / 0) 100%);
}

Quais opções e casos-limite o Gerador de gradiente mesh suporta?

Referência técnica e opções
Parâmetro	Tipo	Padrão	Comportamento e casos-limite
Posição da mancha	0–100%	—	Define o centro da mancha como porcentagem da largura e da altura do elemento.
Alcance	porcentagem	58%	Define os raios da elipse como porcentagens da largura e da altura. A cor desaparece no limite desse alcance.
Cor de base	hexadecimal	#070b1a	Aparece por trás de todas as manchas e nas áreas transparentes do gradiente.
Ponto transparente	rgb() com alfa 0	automático	Usa os mesmos canais RGB da mancha com alfa zero no ponto final do gradiente.
Ordem das camadas	de trás para a frente	camada 4 à frente	A quarta mancha é desenhada por cima. A lista de gradientes CSS é invertida para manter a mesma ordem do SVG.
border-radius	px	0	Arredonda os cantos do fundo; zero mantém os cantos retos.

Perguntas frequentes

Como faço um gradiente mesh em CSS?

Use um `background-color` como base e vários `radial-gradient()` em `background-image`, um para cada mancha. Esta ferramenta calcula os centros, os raios elípticos e os pontos de transparência e entrega o CSS completo.

Por que meu gradiente mesh tem manchas cinzas entre as cores?

A cor de base e a sobreposição de camadas translúcidas podem produzir uma mistura acinzentada. Ajuste a base, as posições e o alcance. O código exportado usa a própria cor com alfa zero; o CSS padrão também interpola corretamente em direção a `transparent`.

Dá para animar um gradiente mesh?

Sim. Ative a animação e ajuste a duração entre 6 e 30 segundos. O CSS animado inclui `@property` e `@keyframes`; mantenha essas regras junto da classe. O SVG também pode ser animado. A preferência `prefers-reduced-motion` desativa o movimento, e o PNG permanece estático.

Gradiente mesh prejudica o desempenho?

O custo depende do tamanho do elemento, da animação e do dispositivo. Prefira um fundo menor ou uma versão estática em áreas grandes e teste a fluidez em celulares. O PNG exportado é uma alternativa quando você não precisa de movimento.

Gradiente mesh funciona atrás de texto?

Sim, desde que o contraste seja suficiente em toda a área ocupada pelo texto. Confira a região mais clara e a mais escura; use uma superfície sólida atrás do texto ou ajuste as cores quando necessário.

Qual é a diferença entre um gradiente mesh e um gradiente linear?

Um gradiente linear varia ao longo de um eixo. Um gradiente mesh combina vários centros de cor em duas dimensões. Esta ferramenta cria esse efeito com quatro gradientes radiais elípticos em camadas.

Equipe ToolsByUs · Como verificamos nossas ferramentas