Gerador de Mesh Gradiente CSS
Crie um suave gradiente mesh multicolorido a partir de quatro cores de canto em camadas como radial-gradients sobre uma cor base — com controle de tamanho de mesclagem, falloff e sobreposição de grão opcional (ou em formato SVG).
Entrada
Cores dos Cantos
Cor de fundo exibida atrás do mesh.
Configurações de Mesh
Valores maiores criam blobs mais suaves e espalhados.
Onde cada cor desaparece para transparente (menor = bordas mais nítidas).
Formato de Saída
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-mesh-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"colorTopLeft": "#ff6b6b",
"colorTopRight": "#feca57",
"colorBottomLeft": "#48dbfb",
"colorBottomRight": "#5f27cd",
"colorBase": "#1a1a2e",
"blendSize": "60",
"falloff": "50",
"enableGrain": "",
"grainIntensity": "25",
"outputFormat": "css"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-gradient-mesh-generator` tool (CSS Gradient Mesh Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-gradient-mesh-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Mesh Gradiente CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que é um mesh gradiente?
Um mesh gradiente (também chamado de "gradient mesh" ou "blob gradient") é um fundo multicolorido suave criado misturando vários pontos de cor juntos em vez de apenas um desaparecimento reto ou radial. Enquanto um linear-gradient ou radial-gradient CSS normal se move suavemente entre apenas duas ou três paradas ao longo de um eixo, um mesh gradiente espalha cor por toda a caixa — a aparência popularizada por ferramentas como páginas de marketing do Stripe, Mesher e inúmeros fundos "aurora" ou "blob".
Esta ferramenta constrói o efeito com CSS puro: quatro cores diferentes, uma ancorada em cada canto (canto superior esquerdo, canto superior direito, canto inferior esquerdo, canto inferior direito), cada uma renderizada como sua própria camada radial-gradient(). O empilhamento de todos os quatro como camadas background-image separadas por vírgula sobre uma cor base sólida produz a mistura suave e envolvente — sem imagens, tela ou JavaScript necessário no tempo de execução.
Como usar esta ferramenta
- Escolha uma cor para cada um dos quatro Cores de Canto — Canto Superior Esquerdo, Canto Superior Direito, Canto Inferior Esquerdo, Canto Inferior Direito — mais uma cor Base que mostra onde os blobs de canto não alcançam.
- Ajuste o Tamanho de Mesclagem % para controlar o quão longe cada cor se espalha antes de desaparecer — valores maiores criam blobs maiores, mais suaves e mais sobrepostos.
- Ajuste o Falloff % para controlar a rapidez com que cada blob desaparece — valores menores dão um ponto de cor mais nítido e concentrado; valores maiores espalham a cor de forma mais gradual.
- Opcionalmente ative Adicionar Sobreposição de Grão e defina sua intensidade para obter uma receita de ruído de textura pronta (um filtro SVG
feTurbulenceinline) para camada — um toque popular em seções de herói mesh-gradient moderno que evita que misturas de cores planas pareçam muito limpas/com bandas. - Escolha um Formato de Saída:
CSSoferece uma declaraçãobackground-color+background-imageem camadas que você pode colar diretamente em uma folha de estilos;SVGoferece um<svg>independente com quatro defs<radialGradient>, útil quando você precisa do mesh como um ativo de imagem em vez de um fundo CSS dinâmico. - Copie o código gerado ou faça o download e coloque em seu projeto.
A saída é atualizada instantaneamente conforme você ajusta qualquer controle — não há uma etapa "gerar" separada.
Por que quatro cantos?
Quatro blobs ancorados em canto é o arranjo mais simples que ainda parece um "mesh" genuíno em vez de um único blob ou desaparecimento diagonal de duas cores — cada canto da caixa tem sua própria cor, e o meio se torna uma zona de mistura natural. Também mantém o CSS gerado curto: quatro camadas radial-gradient(), sem marcação extra, sem matemática de posicionamento para manter.
Perguntas Frequentes
Isso funcionará em todos os navegadores?
Sim. Fundos radial-gradient() em camadas e valores background-image separados por vírgula são suportados em todos os navegadores principais há muitos anos — nenhum prefixo de fornecedor necessário.
Posso usar mais de quatro cores? Não com esta ferramenta — ela foi construída em torno do caso de quatro cantos, que cobre a maioria dos casos de uso de mesh-gradient, mantendo fácil de ler e editar manualmente. Para um mesh gradiente, você ainda pode ajustar qualquer uma das quatro cores ao seu gosto.
Qual é a diferença entre a saída CSS e SVG?
A saída CSS é uma declaração background destinada a ser colada diretamente em uma folha de estilos ou atributo style — ela é renderizada como um fundo dinâmico independente de resolução. A saída SVG é uma imagem independente (um elemento <svg> com definições de gradiente radial) — use-a quando precisar de um mesh gradiente como arquivo ou imagem incorporada em vez de um fundo CSS dinâmico.
Por que minha sobreposição de grão é um bloco CSS separado em vez de cozida no fundo?
O grão funciona melhor como mix-blend-mode: overlay em um elemento filho posicionado sobre o mesh, então o ruído se mistura com as cores abaixo em vez de substituí-las. A ferramenta emite a regra .mesh-grain pronta (com ruído pré-codificado como URI de dados SVG inline) — adicione um elemento filho com essa classe dentro do seu contêiner de gradiente.
Privacidade
Tudo acontece no seu navegador. Suas cores e configurações escolhidas nunca são enviadas para um servidor — o CSS ou SVG é gerado e atualizado localmente conforme você ajusta os controles.