Ir para o conteúdo

Gerador de Gradientes de Malha e Papéis de Parede

Gere gradientes fluidos com pontos de controle interativos, sementes e exportação em 4K.

Gerador de Gradientes de Malha e Papéis de Parede

Gerador 100% no Navegador

Gere gradientes fluidos com pontos de controle interativos, sementes e exportação em 4K.

Predefinições de Design

Controles de Gradiente de Malha

Personalize semente, pontos de controle, desfoque e cor de fundo em tempo real.

Número de Pontos: 4 / 6

Personalize semente, pontos de controle, desfoque e cor de fundo em tempo real.

Mínimo de 4 pontos de controle obrigatório.

50 px
px

Personalize semente, pontos de controle, desfoque e cor de fundo em tempo real.

#0f172a

Personalize semente, pontos de controle, desfoque e cor de fundo em tempo real.

Ponto Selecionado

point-1

21 %
%

Personalize semente, pontos de controle, desfoque e cor de fundo em tempo real.

34 %
%

Personalize semente, pontos de controle, desfoque e cor de fundo em tempo real.

#2beeb3

Personalize semente, pontos de controle, desfoque e cor de fundo em tempo real.

Tela de Gradiente ao Vivo
Tela Interativa

Arraste os pontos ou utilize as setas do teclado / controles deslizantes para reposicionar.

1
2
3
4

Exportar e Baixar

background-color: #0f172a;
background-image:
    radial-gradient(at 21% 34%, #2beeb3 0px, transparent 55%),
    radial-gradient(at 73% 26%, #3c5bf6 0px, transparent 55%),
    radial-gradient(at 37% 67%, #ea62ad 0px, transparent 55%),
    radial-gradient(at 68% 70%, #f6ec60 0px, transparent 55%);
filter: blur(50px);
Resolução de Exportação

Papel de Parede PNG em Alta Resolução

How CSS Mesh Gradients and Layered Radial Gradients Work

Mesh gradients create organic, fluid color transitions by blending multiple independent color nodes across a two-dimensional surface. Rather than restricting colors to linear or conical paths, mesh gradients distribute radial color fields from customized focal points with smooth transparent falloffs.

Mathematical Foundation of Seeded PRNG Generation

Deterministic generation uses a pseudo-random number generator (Mulberry32 PRNG) initialized with a 32-bit unsigned integer seed. Every execution with the same seed reproduces the exact spatial coordinates, color distributions, and layer hierarchies without variance:

s = (s + 0x6D2B79F5) >>> 0;
t = Math.imul(s ^ (s >>> 15), 1 | s);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;

Multi-Resolution Client-Side Canvas Rasterization

Exported PNGs are rendered directly on client-side HTML5 2D canvas surfaces at full device resolutions: 1080p Full HD (1920×1080), 2K Quad HD (2560×1440), and 4K Ultra HD (3840×2160). Because all rendering occurs strictly within your local browser sandbox without requesting external assets, exported canvases remain completely untainted and 100% private.

Frequently Asked Questions

Como funcionam os gradientes de malha em CSS puro sem imagens?
Eles utilizam múltiplas regras radial-gradient() com transições transparentes sobrepostas a uma cor base. O filtro blur() do CSS combina suavemente as cores diretamente no navegador.
O que é a geração determinística com semente?
O algoritmo Mulberry32 PRNG calcula com precisão matemática as posições e harmonias de cores a partir de uma semente numérica. A mesma semente sempre gera a mesma composição.
Os papéis de parede 4K são gerados no meu computador?
Sim. A renderização utiliza a API Canvas HTML5 do seu próprio navegador em resoluções de até 3840×2160 pixels, sem tráfego de rede ou servidores externos.
Posso utilizar os gradientes em projetos comerciais?
Sim. Todo o código CSS e as imagens PNG geradas são de uso livre e gratuito para websites e aplicações comerciais.