Gerador de fundos com gradiente animado — 11 estilos WebGL, prévia ao vivo
Prévia de onze fundos com gradiente e abstratos animados, renderizados ao vivo com WebGL: blobs fluidos, luz ambiente, gradientes em degraus, pontos desfocados, grades, cubos, ondas e mosaicos de triângulos. Troque de estilo e entre seis paletas integradas na hora, sem upload e sem servidor — esta é uma ferramenta de prévia ao vivo, não um exportador de CSS ou de imagens.
O que este gerador de fundos realmente oferece
Onze estilos de fundo movidos por shader
AbstractShape, AestheticFluid, AmbientLight, BigBlob, BlurDot, BlurGradient, GridArray, RandomCubes, StepGradient, TrianglesMosaic e WavyWaves — todos animados continuamente em um canvas de 600 pixels de altura.
Troque estilo e paleta na hora
Dois menus suspensos controlam tudo: um para o estilo do fundo, outro para a paleta. Qualquer mudança reconstrói a animação na hora, sem botão de geração e sem recarregar a página.
Seis paletas integradas
Monochrome, Red, Green, Blue, Yellow e Purple, cada uma uma lista fixa de seis cores hexadecimais. Estilos de quatro cores usam apenas os quatro primeiros valores e os de seis cores usam os seis; as cores extras são truncadas.
Roda localmente na sua GPU
Cada quadro é desenhado via WebGL no navegador. Nada é enviado, nenhuma chamada ao servidor é feita, e a animação continua sem tráfego de rede.
Um playground de prévia, não uma ferramenta de exportação
Não há saída de CSS, download de PNG ou SVG, botão de aleatório, opção de ruído ou textura nem presets salvos. Ângulo, paradas de cor, empilhamento e velocidade também não são expostos.
Perguntas frequentes sobre o gerador de fundos
Quais tipos de gradiente são suportados — linear, radial, cônico ou mesh?
Nenhum dos tipos CSS, a rigor. Esta página renderiza onze fundos com shader WebGL: AbstractShape, AestheticFluid, AmbientLight, BigBlob, BlurDot, BlurGradient, GridArray, RandomCubes, StepGradient, TrianglesMosaic e WavyWaves. Vários parecem gradientes fluidos em estilo mesh, mas são animações de canvas, não gradientes background-image.
O que posso ajustar?
Apenas duas coisas: o menu suspenso de estilo e o de paleta. Não há controles de ângulo, posição de parada de cor, camadas, seletor de cor, velocidade, pausa ou loop. As paletas são seis amostras fixas, e cada estilo usa quatro ou seis delas.
Posso exportar o fundo como imagem?
Não. Não há nenhum toDataURL, toBlob ou lógica de download na página, então o canvas só pode ser visualizado — não pode ser salvo como PNG, JPEG ou SVG.
Ele gera código CSS que eu possa copiar?
Não. Não há saída de CSS nem botão de copiar. Esses fundos são canvases WebGL, não gradientes background-image, então não podem ser reduzidos a um trecho de CSS; para isso você precisa de uma ferramenta separada de gradientes CSS.
Há presets, geração aleatória, ruído ou configurações salvas?
Os únicos presets são as seis paletas integradas. Não há botão de aleatório (a seed é fixa em 1000), nem opção de ruído ou textura, nem gravação no armazenamento local — recarregar a página volta ao AbstractShape com a primeira paleta.
O que acontece quando troco de estilo ou de paleta?
Cada troca cria uma nova instância de fundo e acrescenta outro canvas ao mesmo contêiner; a instância antiga nunca é destruída, então vários canvases com o mesmo id se empilham e você vê o mais recente. Recarregue a página se tiver trocado muitas vezes.
Tudo funciona localmente?
Sim. A renderização acontece inteiramente no seu navegador e na sua GPU via WebGL, sem upload e sem requisição ao servidor. O porém é que um navegador sem suporte a WebGL não tem renderização alternativa.
