# Gerador de malha de gradiente CSS (cônica + radial) Gera a «malha de degradês» em alta na Dribbble/Behance desde 2024: vários degradês radiais (mancha de cor → esmaecimento para transparente da mesma cor) sobre uma cor-base (opcionalmente uma camada cônica), com modos de mistura, granulação de filme SVG, disposições com semente (cantos / anel / dispersão / grade), prévia ao vivo, CSS copiável e classe arbitrária do Tailwind. As manchas esmaecem via hex de 8 dígitos #RRGGBB00, evitando o anel cinza da palavra-chave transparent. > Página canônica: https://elysiatools.com/pt/tools/css-gradient-mesh-generator - **Categoria:** Design - **Palavras-chave:** malha gradiente css, gradiente cônico, camadas radiais, fundo aurora, tailwind gradiente ## Visão geral Sintaxe central (MDN): no background-image multicamadas a primeira fica por cima; uma camada radial escreve-se radial-gradient(circle at x% y%, #cor 0%, #cor00 60%) — parada transparente a 35–50% = manchas duras, 50–70% = malha clássica (padrão 60%), 80–100% = lavagem suave; a cor-base vai em background-color. A camada cônica conic-gradient(from Xdeg at 50% 50%, …) dá variação angular tipo aurora. A lista background-blend-mode corresponde à ordem das camadas (normal pilha / multiply tinta / screen brilho / overlay meios saturados / soft-light aurora suave / hue / difference psicodélico). A granulação é um data-URI SVG feTurbulence inline em baixa opacidade + mix-blend-mode: overlay. As disposições são guiadas por semente mulberry32: mesma semente, mesma malha. O export Tailwind é um único valor arbitrário (espaços → sublinhados): bg-[radial-gradient(circle_at_20%_25%,_#7c3aed_0%,_#7c3aed00_60%),…] + bg-[#base]. ## Entradas - **Paleta predefinida** (select) - **Cor personalizada 1** (color) - **Cor personalizada 2** (color) - **Cor personalizada 3** (color) - **Cor personalizada 4** (color) - **Número de manchas de cor** (number) - **Disposição das manchas** (select) - **Semente aleatória** (number) - **Declínio (parada transparente %)** (number) - **Modo de mistura** (select) - **Adicionar base cônica** (checkbox) - **Ângulo inicial cônico (graus)** (number) - **Adicionar granulação de filme** (checkbox) ## Quando usar - Ao projetar seções hero ou fundos visuais marcantes para landing pages sem a sobrecarga de imagens pesadas. - Ao necessitar de gradientes multicamadas consistentes com controle determinístico de sementes aleatórias. - Ao criar interfaces modernas com Tailwind CSS que exigem classes arbitrárias de gradiente com modos de mistura. ## Como funciona - Selecione uma paleta predefinida ou defina cores hexadecimais personalizadas para compor os focos de cor. - Ajuste a quantidade de manchas, a disposição espacial (cantos, anel, dispersão ou grade) e a semente aleatória. - Configure a taxa de declínio, o modo de mistura, a inclusão de base cônica angular e o efeito de granulação de filme SVG. - Visualize o resultado instantaneamente na prévia ao vivo e copie o bloco CSS nativo ou a classe arbitrária formatada para o Tailwind CSS. ## Casos de uso - Criação de fundos estilizados no estilo aurora para cabeçalhos de sites SaaS e páginas de lançamento. - Desenvolvimento de cartões de interface e banners digitais leves sem dependência de arquivos PNG ou WebP. - Padronização de identidades visuais dinâmicas em projetos Tailwind CSS com paletas configuráveis. ## Perguntas frequentes ### Por que a ferramenta utiliza hex de 8 dígitos em vez da palavra-chave transparent? O uso de #RRGGBB00 preserva o matiz exato da cor durante o esmaecimento, evitando o anel cinza indesejado comum ao interpolar com a palavra-chave transparent. ### Como funciona a semente (seed) aleatória? A semente utiliza o algoritmo mulberry32, garantindo que o mesmo número gere exatamente a mesma distribuição e posicionamento das manchas. ### Qual é o impacto do declínio (falloff) na aparência do fundo? Valores entre 35% e 50% criam manchas mais nítidas e definidas, 50% a 70% geram a malha difusa clássica, e 80% a 100% produzem uma lavagem de cor suave. ### Como a textura de granulação é implementada no código exportado? A granulação é adicionada por meio de um elemento SVG inline com feTurbulence em formato data-URI, aplicado com baixa opacidade e mix-blend-mode. ### O código exportado funciona diretamente no Tailwind CSS? Sim, a ferramenta gera uma classe utilitária arbitrária com espaços convertidos em sublinhados, pronta para ser colada no atributo class do HTML. ## Ferramentas relacionadas - [Gerador de sprite sheet SVG](https://elysiatools.com/pt/tools/svg-sprite-generator): Envie até 30 ícones SVG e mescle-os em um único sprite sheet: modo para embutido, modo para fragmentos de arquivo externo. Normaliza o viewBox (derivado de width/height), deduplica ícones, opcionalmente remove fill/stroke para currentColor, sempre limpa e atributos on\*, e gera snippets HTML / React / Vue / CSS com pré-visualização ao vivo de cada ícone. - [Gerador de snippets CSS glassmorphism / neumorfismo](https://elysiatools.com/pt/tools/glassmorphism-css-snippet-builder): Gera de ponta a ponta o snippet CSS completo de glassmorphism ou neumorfismo: ajuste desfoque, saturação, opacidade da tonalidade, raio, borda, sombra externa e brilho superior; opcionalmente sobreposição de grão SVG feTurbulence e fallback @supports; inclui automaticamente o prefixo -webkit-backdrop-filter (obrigatório antes do Safari 18) e o mapeamento para classes Tailwind (com a nota v3/v4), com pré-visualização ao vivo sobre fundo em gradiente. - [Gerador de Favicon SVG](https://elysiatools.com/pt/tools/svg-favicon-generator): Transforma um logo SVG ou raster em um pacote favicon completo com ICO, variacoes PNG, Apple touch icon e web manifest - [Ferramenta de Marca d'Água Diagonal](https://elysiatools.com/pt/tools/image-watermark-diagonal): Adicione marcas d'água diagonais a imagens com ângulo, tamanho, opacidade e posicionamento ao longo da diagonal personalizáveis - [Ferramenta de Mosaico de Marca d'Água](https://elysiatools.com/pt/tools/image-watermark-tile): Adicione marcas d'água em mosaico a imagens com tamanho, opacidade, espaçamento e padrões personalizáveis - [Gerador de Data URI](https://elysiatools.com/pt/tools/data-uri-generator): Converte arquivos em Data URIs (Base64 ou porcentagem-codificada) para incorporar imagens, fontes e recursos diretamente em HTML, CSS ou Markdown - [Pirâmide de Biomassa e Fluxo de Energia (lei dos 10%)](https://elysiatools.com/pt/tools/biomass-pyramid): Gera uma pirâmide trófica segundo a lei de Lindeman: informe a energia/biomassa dos produtores E₁, a eficiência de transferência (10% padrão, 0.1–40%) e o número de níveis (3–6). Obtém a energia/biomassa de cada nível, sua porcentagem dos produtores e a perda em cada transferência (respiração, egestão, não predação). Renderiza uma pirâmide SVG colorida (larguras em escala √E para visibilidade; os valores exibidos são sempre reais) e uma tabela por nível, e explica por que pirâmides de energia são sempre eretas enquanto as de números/biomassa podem inverter-se (ex. ecossistemas marinhos). Eficiências reais típicas: 5–20%. - [Decompositor de ordem de traços chineses](https://elysiatools.com/pt/tools/chinese-stroke-order-decomposition): Decompõe um caractere chinês na sua sequência de traços e estrutura de radicais, e renderiza uma demonstração SVG da ordem dos traços com coloração de componentes. ## Exemplos - [Exemplos SVG](https://elysiatools.com/pt/samples/svg-samples): Exemplos de Gráficos Vetoriais Escaláveis (SVG) demonstrando vários recursos e técnicas SVG - [Tailwind CSS Samples](https://elysiatools.com/pt/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato - [Exemplos do Framework CSS Bulma](https://elysiatools.com/pt/samples/bulma): Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS ## Conteúdo relacionado - [Ferramentas de Workflow para SVG, Favicon e Icones](https://elysiatools.com/pt/hubs/svg-favicon-icon-workflows): Gere pacotes de favicon, otimize SVGs, converta icones entre ICO, PNG, JPG, WebP e SVG e prepare assets prontos para web em um unico hub. - [Ferramentas de codificacao e conversao de audio](https://elysiatools.com/pt/hubs/audio-convert): Compare conversao de formatos de audio, ajustes de bitrate, conversao de taxa de amostragem, troca de codec e exportacao em um unico hub. - [Ferramentas de conversao de formatos de imagem e exportacao animada](https://elysiatools.com/pt/hubs/image-convert): Compare conversores de imagem para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 e saidas voltadas para animacao em um unico hub. - [Ferramentas de intercambio JSON e traducao de formatos](https://elysiatools.com/pt/hubs/json-convert): Compare ferramentas de conversao JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN e outros formatos estruturados em um unico hub.