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.

Elysia Tools

Navegação

Design

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.

Detalhes

O que esta ferramenta ajuda você a fazer

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(circleat20%25%,#7c3aed0%,#7c3aed00_60%),…] + bg-[#base].

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Execuções de exemplo preparadas

Clique em um exemplo para preencher o formulário automaticamente. Arquivos ainda precisam ser enviados.

2 exemplos

Fundo de herói Cosmic — a malha padrão

Quatro manchas (violeta, rosa, ciano, menta) nos cantos sobre base quase preta, declínio 60%, mistura normal — o visual assinatura ao estilo conic.style, pronto para colar.

<section class="cgm">300px live mesh preview · .gradient-mesh CSS block with 4 radial layers · Tailwind bg-[…] class · layer chips + palette</section>

Brasa brilhante — dispersão, base cônica, granulação e mistura screen

A paleta ember dispersa da semente 777 sobre sua base quase preta, com base cônica a partir de 45°, mistura screen para sobreposições brilhantes e granulação de filme — toda a pilha de acabamento em um preset; o aviso da ferramenta sinaliza a combinação inversa (base clara + screen).

<section class="cgm">ember scatter mesh preview glowing over #1c0a0a · 5 radial layers + conic underlay = 6 layers · grain ::after pseudo-element in the CSS · Tailwind class</section>

Entradas

As opções estão agrupadas para deixar formulários longos mais fáceis de revisar.

13 opções

ConfiguraçõesAjuste formatos, intervalos, números e modos.11

Paleta predefinidaselectOpcionalCor personalizada 1colorOpcionalCor personalizada 2colorOpcionalCor personalizada 3colorOpcionalCor personalizada 4colorOpcionalNúmero de manchas de cornumberOpcionalDisposição das manchasselectOpcionalSemente aleatórianumberOpcionalDeclínio (parada transparente %)numberOpcionalModo de misturaselectOpcionalÂngulo inicial cônico (graus)numberOpcional

AlternânciasAtive ou desative comportamentos opcionais.2

Adicionar base cônicacheckboxOpcionalAtivo quando marcadoAdicionar granulação de filmecheckboxOpcionalAtivo quando marcado

Resultado

Pronto para executar

Depois de executar, arquivos, texto, dados estruturados ou saída em streaming aparecerão aqui.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Gerador de malha de gradiente CSS (cônica + radial)

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Execuções de exemplo preparadas

Entradas

Resultado

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Fundo Hero Cósmico para SaaS

2. Fundo Aurora com Brilho e Textura

Perguntas frequentes

Exemplos SVG

Tailwind CSS Samples

Exemplos de Processamento de Imagem Web Python

Exemplos do Framework CSS Bulma

Gerador de sprite sheet SVG

Gerador de snippets CSS glassmorphism / neumorfismo

Gerador de Favicon SVG

Ferramenta de Marca d'Água Diagonal

Ferramentas de Workflow para SVG, Favicon e Icones

Ferramentas de codificacao e conversao de audio

Ferramentas de conversao de formatos de imagem e exportacao animada

Ferramentas de intercambio JSON e traducao de formatos