Como ele é
Lembra luz colorida atravessando uma cortina de seda, fora de foco. Quatro manchas de cor, índigo, ciano, lavanda e um quase branco, ficam perto dos cantos e passeiam em órbitas lentas, enquanto o plano se dobra como água e faz as fronteiras ondularem. As transições ficam limpas, sem tons barrentos, e um grão fino de filme cintila por cima, como numa foto analógica. Não reage ao mouse: é um fundo ambiente e calmo, que preenche o elemento pai e deixa o conteúdo por cima.
Você pode estar procurando isto se pediu algo assim
- fundo com cores se misturando devagar, tipo degradê vivo
- aquele gradiente colorido com granulado de foto antiga
- degradê em movimento para o topo do site sem pesar
- fundo de cores suaves como o papel de parede de celular novo
- gradiente que muda sozinho para a capa da apresentação
- fundo elegante azul e lilás para a seção de chamada
- mancha de cor fluida atrás do título, bem discreta
Também chamado de
- mesh gradient
- gradiente em malha
- degradê animado
- animated gradient background
- fundo com granulado
- grain gradient
- OKLab gradient
Quando usar
- Hero de SaaS, fintech ou produto digital que quer clima sofisticado
- Seção de chamada para ação com título curto
- Capa de apresentação, relatório ou página de evento
- Páginas em que um efeito 3D pesado seria exagero
Quando evitar
- Quem procura interação: o gradiente não reage ao mouse nem ao toque
- Blocos de texto longo sobre as áreas mais escuras, sem conferir o contraste
Como pedir para a sua IA
Crie um fundo de mesh gradient em WebGL para o hero: quatro cores da minha marca derivando devagar, mistura em OKLab sem tons barrentos, grão de filme sutil, pausa fora da tela, versão parada para movimento reduzido e bom contraste com o título.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Mesh Gradient
O Mesh Gradient deixa o site lento?
Não costuma deixar. O Mesh Gradient é Leve no THM Componentes: desenha um único shader por quadro, limita a densidade de pixels a 2 e pausa quando sai da tela. É uma boa escolha quando você quer cor em movimento sem o custo de uma simulação. Teste o LCP no celular antes e depois.
Como colocar as cores da minha marca no Mesh Gradient?
O Mesh Gradient tem quatro props de cor, uma para cada ponto da malha, e o prompt do THM Componentes orienta a IA a usar os tokens do seu projeto. Como a mistura acontece em OKLab, as transições ficam limpas, sem tons barrentos. Warp, suavidade, velocidade e grão também são ajustáveis.
O Mesh Gradient respeita quem prefere menos movimento?
Sim. O Mesh Gradient lê a preferência de movimento reduzido a cada quadro: quando ela está ativa, as cores param onde estão e o grão de filme cai pela metade e fica imóvel, deixando um gradiente estático. Se a pessoa desligar a preferência, a animação volta sem recarregar a página.
