🎨 Dev

Gerador de Mesh Gradient

Crie mesh gradients modernos combinando vários radial-gradients. Adicione, remova e arraste pontos para compor fundos vibrantes ao estilo Stripe e Linear. Tudo no navegador.

Preview (arraste um ponto, ou ajuste cor e x/y ao lado)

Pontos (cor / posição)

Cor de fundo Tamanho do raio (%) 50%

CSS

Mesh gradient sem imagem

Mesh gradients criam fundos vibrantes que parecem misturas de tinta. A técnica empilha vários radial-gradient com cores que desaparecem para transparente, sobre uma cor de base sólida. Cada ponto vira um foco de cor.

Sem imagem, sem WebGL, sem JS em runtime — apenas CSS. Funciona em todos os browsers modernos. Tudo no navegador.

Crie mesh gradients vibrantes

Você já viu aqueles fundos coloridos e fluidos que viraram marca registrada de empresas como Stripe e Linear. São os mesh gradients, e dão um ar moderno a qualquer tela. Este gerador recria o efeito combinando vários gradientes radiais numa composição só.

Adicione, remova e arraste os pontos de cor para compor o fundo, misturando tons até chegar naquela transição suave e vibrante que define o estilo. A flexibilidade é bem maior do que a de um gradiente linear comum, e o resultado já sai em CSS para colar no projeto.

Tudo roda no navegador, com preview imediato enquanto você mexe. Uma maneira descomplicada de adotar uma das tendências de fundo mais usadas em sites e apps de hoje.

Perguntas frequentes

Consigo arrastar os pontos de cor direto no preview?

Não. Apesar do cursor em cruz, o preview não responde a clique nem a arraste: a posição de cada ponto é digitada nos campos x e y da lista ao lado, em porcentagem da largura e da altura. O primeiro ponto do preset Pôr do sol, por exemplo, fica em x 20 e y 25. Qualquer valor fora da faixa de 0 a 100 é cortado automaticamente para o limite mais próximo, e o preview se atualiza a cada tecla.

O que o controle de tamanho do raio muda de verdade?

Ele define até onde cada cor caminha antes de virar transparente. Cada ponto vira um radial-gradient com a sua cor em 0% e transparent na porcentagem do controle, que começa em 50%. Valores baixos deixam bolhas separadas, com a cor de fundo aparecendo entre elas; valores altos fazem os círculos se sobreporem e é daí que nasce a mistura contínua típica do estilo. O controle é único e vale para todos os pontos ao mesmo tempo.

O botão Remover último apaga o ponto que eu escolhi?

Não, ele sempre tira o último da lista e para quando resta um só ponto. Adicionar cria um ponto em posição sorteada com cor vinda de uma paleta fixa de seis; Aleatório descarta o que existe e sorteia de 4 a 6 pontos novos. Os três presets também substituem tudo, inclusive a cor de fundo. Como não há desfazer, copie o CSS antes de clicar em qualquer um deles se a composição atual interessa.

Ferramentas Relacionadas

🌈

Gerador de Gradiente CSS

Crie gradientes lineares e radiais para CSS com prévia em tempo real. Ajuste cores, posições e ângulo. Copie o código CSS com um clique.

🔘

Gerador de Botão CSS

Crie botões CSS customizados: cor, texto, padding, border-radius, sombra e hover. Veja o preview em tempo real e copie o HTML+CSS pronto para colar no projeto. Tudo no navegador.

🪟

Gerador de Glassmorphism CSS

Crie efeitos de vidro fosco (glassmorphism) com backdrop-filter, transparência e bordas. Ajuste blur, saturação e opacidade. Veja o preview em tempo real e copie o CSS. Tudo no navegador.

🟢

Gerador de Neumorphism CSS

Crie efeitos Soft UI (neumorphism) com dois box-shadows complementares. Ajuste cor de base, distância, blur e tipo (extrudido, plano, pressionado). Cópia em CSS pronto. Tudo no navegador.

🌑

Gerador de Sombra CSS

Crie sombras CSS (box-shadow) com prévia em tempo real. Configure múltiplas camadas de sombra, cor, desfoque, expansão e inset. Copie o código CSS.

🎯

Focus-Visible CSS Snippet

Gera snippet CSS focus-visible com cor de outline customizada (WCAG 2.4.7).