Gerador de Gradientes Mesh CSS & SVG

Gerador de Gradientes Mesh CSS & SVG

Gere gradientes de malha CSS multiponto, fundos animados e malhas de cores em SVG. Personalize pontos de controle, textura de ruído analógico e copie código CSS ou Tailwind.

Carregar Modelo
Palco Interativo de Malha
1
2
3
4
Arraste os pontos de controle na tela para reposicioná-los em tempo real4 / 12 Pontos de Controle
Ponto de Controle Ativo #1
Coordenada X15%
Coordenada Y20%
Raio de Dispersão75%
Opacidade do Ponto90%
Cor do Ponto:
Cor Base da Tela:
Topologia da Malha
Grão de Filme Analógico e Ruído
18%
Meta de AcessibilidadeTexto Branco (#FFFFFF)
Enquadramento de Exibição
60 FPS Sincronizados por GPU4 Camadas Radiais Sobrepostas (SRGB)
/* Modern CSS Mesh Gradient (SRGB) */
:root {
  --mesh-base: #0d0b1a;
  --mesh-point-1: rgba(99, 102, 241, 0.90);
  --mesh-point-2: rgba(6, 182, 212, 0.85);
  --mesh-point-3: rgba(236, 72, 153, 0.80);
  --mesh-point-4: rgba(139, 92, 246, 0.90);
}

.mesh-container {
  background-color: var(--mesh-base);
  background-image:
    radial-gradient(at 15% 20%, rgba(99, 102, 241, 0.90) 0px, transparent 75%),
    radial-gradient(at 80% 15%, rgba(6, 182, 212, 0.85) 0px, transparent 85%),
    radial-gradient(at 30% 85%, rgba(236, 72, 153, 0.80) 0px, transparent 90%),
    radial-gradient(at 85% 80%, rgba(139, 92, 246, 0.90) 0px, transparent 70%);
}
Tamanho do Código CSS: 644 bytesClassificação WCAG 2.1:Aviso Técnico
60 FPS Sincronizados por GPUMovimento de Flutuação Ativo
Pontos de Controle4 Camadas Radiais Sobrepostas
Classificação WCAG 2.1Auditoria de Contraste Ativa
Tamanho do Código CSS644 bytes
Gama de CoresSRGB
Modo de ComparaçãoScenario A

Processamento no Navegador

Cálculo de alto desempenho executado inteiramente na memória do navegador.

Privacidade com Zero Upload ao Servidor

Todos os dados permanecem estritamente locais, sem qualquer comunicação com servidores externos.

Exportação Pronta para Produção

Formatos de saída limpos e otimizados, prontos para implantação imediata.

ToolsAA•Utilitários web 100% privados no cliente
Referência técnica e guia de arquitetura

Gerador de Mesh Gradient CSS & SVG — Guia de referência

Gere mesh gradients CSS multiponto, fundos animados e malhas de cores SVG. Ajuste pontos de controle, textura de granulação e copie código CSS ou Tailwind CSS.

Gerador de Mesh Gradient CSS & SVG — Guia de referência — Arquitetura em memória do lado do cliente e fluxo de dados
Gerador de Mesh Gradient CSS & SVG — Guia de referência — Arquitetura em memória do lado do cliente e fluxo de dados

Parâmetros-chave e controles

Coordenadas do ponto (point_coordinates x, y)porcentagem (0% a 100%)

Define o centro focal bidimensional (2D) de cada ponto de luz e cor na tela. No radial-gradient do CSS, mapeia-se diretamente à sintaxe de posicionamento 'at x% y%', ditando onde o pico de intensidade da cor é ancorado.

Padrão: 50%, 50%
Raio de dispersão do ponto (point_radius / spread)porcentagem ou raio em pixels (10% a 150%)

Controla a distância de difusão radial de 100% de saturação da cor até a opacidade zero. Porcentagens de dispersão mais altas geram transições bicúbicas suaves e contínuas, enquanto raios menores produzem efeitos pontuais de holofote (spotlight) ou esferas de neon.

Padrão: 80%
Cor base da malha (mesh_base_color)string de cor HEX ou RGB

A cor de fundo fundamental (background-color) subjacente ao canvas. Todas as camadas de radial-gradient transitam para 'transparent', combinando-se de forma aditiva e multiplicativa sobre essa cor base, que também atua como fallback para navegadores legados.

Padrão: #131116
Intensidade e opacidade do grão (grain_intensity & opacity)multiplicador float (0.0 a 1.0)

Controla a opacidade e a frequência da camada de sobreposição com filtro procedural de ruído SVG feTurbulence. A granulação quebra o banding de cores (linhas de contorno escalonadas) de monitores de 8 bits e proporciona uma estética analógica tátil de filme ou papel.

Padrão: 0.15
Duração da animação e deriva (animation_duration & drift)segundos (4s a 30s) e deslocamento em pixels

Especifica o tempo de loop e o limite de deslocamento do movimento flutuante ambiental via @keyframes do CSS. Os pontos oscilam suavemente ao longo de trajetórias senoidais, criando um fundo orgânico e dinâmico sem sobrecarregar a CPU.

Padrão: 12s
Taxa de contraste WCAG (wcag_contrast_ratio)proporção (1:1 a 21:1)

O contraste perceptual de luminância calculado entre a tipografia do texto e a superfície do gradiente em 9 quadrantes distintos, avaliado conforme os padrões AA (4.5:1) e AAA (7:1) das Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.1).

Padrão: 4.5:1

Dicas profissionais e melhores práticas

Elimine o banding de cores de 8 bits com dithering e ruído SVG

Monitores RGB convencionais operam em profundidade de cor de 8 bits (256 níveis por canal), o que costuma evidenciar faixas de contorno rígidas quando gradientes suaves se espalham por grandes áreas. A inserção de uma sutil camada de granulação SVG feTurbulence com opacidade entre 3% e 5% atua como um dithering de alta frequência, dispersando os valores dos pixels e eliminando completamente os artefatos visuais de faixas (color banding).

Alcance animações fluidas a 60 FPS com camadas de transformação por GPU

Animar propriedades como background-position ou coordenadas de radial-gradient no CSS força o navegador a recalcular o layout e executar ciclos contínuos de repintura (paint), degradando a taxa de quadros especialmente em dispositivos móveis. Para obter animações a 60 FPS com máxima fluidez, posicione os nós de cor em pseudoelementos (::before / ::after) ou elementos div dedicados e anime a propriedade transform: translate3d(x, y, 0) com will-change: transform, aproveitando a composição acelerada por hardware na GPU.

Garanta legibilidade tipográfica entre quadrantes de alto contraste

Gradientes em malha frequentemente mesclam pontos escuros e brilhantes, o que pode tornar uma cor única de texto ilegível em determinadas regiões do layout. Inspecione sempre o analisador de contraste WCAG nos 9 quadrantes: se a taxa oscilar drasticamente entre as áreas, aplique uma sobreposição sutil de escurecimento linear (como linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6))) ou utilize cartões com backdrop-filter no estilo glassmorphism sob os blocos de texto.

Otimize mesh gradients em CSS para projetos com Tailwind CSS

Em vez de poluir a marcação HTML com strings extensas de radial-gradient inline, extraia os tokens do gradiente gerado diretamente para o objeto theme.extend.backgroundImage no arquivo tailwind.config.js (por exemplo, 'mesh-hero': 'radial-gradient(...)'). Isso permite utilizar classes utilitárias elegantes como bg-mesh-hero, preservando a purga de código automatizada do Tailwind e a otimização em tempo de compilação.

Armadilhas comuns e solução de problemas

⚠️Degradação visual com faixas de contorno e faixas pixeladas (color banding) na fusão do gradiente

O color banding ocorre quando cores vizinhas apresentam valores de luminância muito próximos em monitores de 8 bits. Ative a sobreposição de Grão / Ruído (Grain / Noise) com opacidade entre 10% e 15% para aplicar dithering nas bordas de transição ou amplie a porcentagem de dispersão radial (>80%) para estender a faixa de interpolação.

⚠️Alto consumo de CPU ou engasgos (stuttering) em celulares ao executar gradientes animados

Evite animar porcentagens de radial-gradient diretamente nas regras @keyframes do CSS. Em vez disso, utilize o código de animação gerado por esta ferramenta, que isola os nós de cor em camadas promovidas à GPU com will-change: transform e vetores de translação 3D (translate3d), reduzindo o trabalho de pintura (paint) da CPU a zero.

⚠️O filtro de gradiente SVG exibe tela preta ou cortes visuais no Safari para iOS

O motor WebKit do Safari recorta filtros SVG caso o atributo filterUnits ou as dimensões da bounding box não estejam explicitamente definidos. Ao incorporar o código SVG vetorial diretamente, certifique-se de que a tag <filter> contenha x='-20%' y='-20%' width='140%' height='140%' filterUnits='userSpaceOnUse' para evitar o corte dos limites do filtro.

⚠️O compilador do Tailwind CSS gera erro de sintaxe com strings arbitrárias de radial-gradient

Valores arbitrários no Tailwind CSS (como bg-[...]) não toleram espaços em branco sem escape. Substitua os espaços da sintaxe do gradiente por sublinhados (por exemplo, radial-gradient(at_20%_30%,_#6366f1_0px,_transparent_70%)) ou adicione a configuração gerada diretamente no arquivo tailwind.config.js na seção theme.extend.backgroundImage.

Perguntas frequentes (FAQ)

Como criar um mesh gradient em CSS puro sem imagens externas ou SVG?▼

É possível criar um mesh gradient em CSS puro sobrepondo múltiplas camadas de radial-gradient sobre uma única background-color base. Cada camada define um ponto focal específico (por exemplo, 'radial-gradient(at 20% 30%, #6366f1 0px, transparent 70%)') que transiciona gradualmente para a transparência total, permitindo que vários pontos de luz e cor se cruzem e fundam harmonicamente usando apenas CSS nativo.

Como animar um mesh gradient em CSS para fundos de seções Hero em sites?▼

Para animar um gradiente em malha a 60 FPS sem engasgos, atribua cada nó de cor a um elemento com posicionamento absoluto ou pseudoelemento com desfoque gaussiano pronunciado (como filter: blur(60px)). Em seguida, aplique animações CSS via @keyframes com transform: translate3d(dx, dy, 0) e scale(), acionando o compositor acelerado da GPU do navegador em vez de forçar repinturas e recálculos custosos de layout na CPU.

Qual é a diferença entre um mesh gradient em CSS e uma malha de gradiente em SVG?▼

O mesh gradient em CSS utiliza o empilhamento nativo de múltiplas camadas em background-image, exigindo zero requisições HTTP externas, peso insignificante de arquivo e renderização instantânea em qualquer navegador moderno. Já o gradiente em SVG emprega marcação vetorial (<radialGradient> ou malhas bicúbicas de Bézier), oferecendo escalabilidade vetorial independente de resolução e suporte a filtros gráficos avançados (como ruído feTurbulence), embora resulte em uma marcação DOM ligeiramente mais verbosa.

Como adicionar textura de granulação ou ruído de filme a um gradiente CSS?▼

Para incorporar uma textura analógica de grão de filme, sobreponha um filtro de ruído SVG via Data URI ou SVG inline. O filtro utiliza a primitiva <feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/> combinada sobre o gradiente CSS com mix-blend-mode: overlay e opacidade calibrada entre 0.10 e 0.20, eliminando com eficácia as faixas de cor de 8 bits e conferindo um acabamento sofisticado e tátil à composição visual.

Um mesh gradient CSS complexo afeta o desempenho da página ou a pontuação no Google Lighthouse?▼

Gradientes estáticos em CSS puro não causam impacto mensurável na pontuação de desempenho do Google Lighthouse, pois dispensam tráfego de rede, eliminam decodificação de imagens pesadas e são rasterizados diretamente pela GPU. Contudo, animar filtros pesados de desfoque (como blur > 100px) em telas de smartphones pode demandar processamento excessivo; utilizar as animações pré-otimizadas com translate3d geradas pela nossa ferramenta assegura estabilidade a 60 FPS sem drenar a bateria do usuário.

Como garantir legibilidade e conformidade de contraste WCAG sobre gradientes dinâmicos?▼

Como os mesh gradients possuem variações de luminância em diferentes regiões, utilize nosso analisador integrado de contraste WCAG nos 9 quadrantes para auditar as proporções. Assegure que todos os setores onde o texto repousa mantenham contraste mínimo de 4.5:1 para texto de corpo (WCAG AA) ou 3:1 para títulos de grande escala. Caso algum quadrante fique abaixo do limiar, aplique uma película sutil semitransparente escura ou clara atrás da camada tipográfica.

Ferramentas e utilitários relacionados

Todas as ferramentas →
Gerador de Links UTM & CampanhasDesenvolvimento

Crie, valide e gere em lote links de rastreamento de campanhas para o Google Analytics GA4 com nosso construtor UTM gratuito. Higienize URLs, analise tags existentes e exporte QR codes.

Abrir ferramenta→
Formatador & Validador JSON (Online)Desenvolvimento

Formate, valide, embeleze e repare JSON corrompido instantaneamente online. Corrija erros de sintaxe, adicione aspas a chaves, minifique e inspecione nós da árvore com zero envio ao servidor.

Abrir ferramenta→
Codificador & Decodificador Base64Desenvolvimento

Codifique e decodifique strings Base64 ou arquivos binários instantaneamente. Suporte a base64url seguro para URLs, UTF-8, quebras de linha MIME, Data URLs e autorreparo em tempo real.

Abrir ferramenta→
Conversor de JSON para TypeScript Interface e TiposDesenvolvimento

Converta payloads JSON em interfaces ou type aliases TypeScript limpos e tipados, com inferência automática de objetos aninhados e propriedades opcionais.

Abrir ferramenta→
Gerador de Esquemas Zod a partir de JSON (Validação TypeScript em Runtime)Desenvolvimento

Infira e gere esquemas Zod em TypeScript, definições de tipos e regras de validação aninhadas a partir de dados JSON brutos.

Abrir ferramenta→
Gerador de Esquema JSON para TypeBox (Provedor rápido de tipos JSON Schema)Desenvolvimento

Converta estruturas JSON em definições de alto desempenho TypeBox Type.Object para Fastify, Ajv e validação em tempo de execução no TypeScript.

Abrir ferramenta→