Gerador de mesh gradient: arraste pontos de cor, copie o CSS | We.Inc
Arraste pontos de cor em um canvas para criar um mesh gradient suave e copie CSS puro com radial gradients empilhados ou baixe um PNG. Grátis, no navegador.
Gerador de mesh gradient
Um mesh gradient mistura vários pontos de cor sobre uma superfície em vez de seguir uma única linha. Na web dá para simular com CSS puro empilhando um radial-gradient por ponto sobre uma cor de base. Arraste os pontos abaixo, defina a cor e o alcance de cada um e copie o CSS ou salve um PNG.
Qual ferramenta de gradiente serve para cada caso
Você quer
Use
Resultado
Um fundo parado com manchas suaves, sem script
Este gerador de mesh
CSS ou PNG
Um fundo que se move devagar
Gerador de shader gradient
Componente WebGL
Uma mistura linear, radial ou cônica com duas a cinco paradas
Gerador de gradiente CSS
Uma linha de gradiente
Cada ponto aqui vira o seu próprio radial gradient, pintado sobre uma cor de base. Como o resultado é CSS comum, ele não exige download, não precisa de JavaScript no seu site e se adapta a qualquer tamanho de caixa sem ficar borrado.
Escolha um preset ou mantenha o padrão e arraste qualquer marcador numerado no canvas para mover aquela cor.
Quem usa teclado pode focar um marcador e ajustá-lo com as setas, ou digitar valores exatos de X e Y na lista de pontos.
Mude a cor e o alcance de um ponto. O alcance é onde a cor fica totalmente transparente, medido como uma fração da distância do ponto até o canto mais distante da caixa.
Adicione até oito pontos ou remova os que sobrarem, e depois copie o CSS ou baixe o canvas como PNG no tamanho que escolher.
Três a cinco pontos costumam ficar mais ricos que oito. Mais camadas geralmente transformam o meio em lama.
Deixe a cor de base perto do ponto mais claro para um visual pastel, ou bem escura para um estilo noturno brilhante.
Mantenha os títulos sobre a área mais calma e confira o contraste nos pontos mais claros e mais escuros que eles cobrem.
O PNG é útil para e-mails e imagens de redes sociais, onde um fundo em CSS não acompanha o design.
Perguntas frequentes
Isto é um mesh gradient de verdade?
Apps de design, como editores vetoriais, criam malhas reais a partir de uma grade de retalhos. O CSS não tem função de malha, então esta ferramenta sobrepõe radial gradients, o que dá a mesma sensação suave e multicolorida para fundos e seções hero.
Qual a diferença para o gerador de shader gradient?
A ferramenta de shader desenha um gradiente animado com WebGL e exporta um componente que roda um script. Esta cria uma imagem parada só com CSS, então renderiza na hora, sai na impressão e funciona onde scripts estão bloqueados.
Por que cada cor desaparece em uma versão transparente dela mesma?
Desaparecer até a palavra-chave transparent pode puxar a borda para o cinza em alguns modos de interpolação. Terminar cada camada com o mesmo vermelho, verde e azul e alfa zero mantém a borda limpa.
Posso usar o CSS no Tailwind?
Sim. Coloque as declarações em uma classe na sua folha de estilos, ou cole o valor de background-image em uma propriedade arbitrária como [background-image:...] se preferir deixar inline.
O PNG fica idêntico ao CSS?
Bem parecido. O download é desenhado em um canvas com os mesmos pontos, cores e alcance, mas os navegadores podem suavizar os gradientes do canvas de um jeito um pouco diferente dos de CSS.
Como radial gradients empilhados formam uma malha
O background-image aceita uma lista separada por vírgulas, e a primeira camada da lista é pintada por cima. Cada camada aqui é um círculo centrado em um ponto, sólido no centro e transparente no seu alcance, então as cores vizinhas se sobrepõem e se misturam.
Nenhuma palavra-chave de tamanho é informada, então cada círculo usa o tamanho padrão farthest-corner, e as porcentagens das paradas acompanham a caixa. Por isso, um ponto perto do centro se espalha menos que um no canto com o mesmo alcance, e um banner largo deixa todos os círculos maiores, então visualize na proporção que você vai usar de verdade.
Como deixar bonito
Escolha cores próximas umas das outras no círculo cromático para resultados calmos, e adicione um único ponto contrastante para dar energia. Puxe pontos parcialmente para fora da borda para sugerir que a cor continua além do quadro.
Se aparecerem faixas visíveis em gradientes grandes e escuros, adicione uma textura de ruído sutil como camada extra, ou clareie um pouco a base.
O CSS por trás de uma malha
Este é o preset Porto escrito à mão. Edite qualquer valor e o resultado é atualizado no quadro.
Quatro pontos sobre uma base clara
Cada radial-gradient é um ponto de cor. As camadas listadas primeiro ficam por cima das seguintes.
O que cada ajuste controla
Ajustes e o CSS que eles geram
Ajuste
Parte do CSS
Efeito
Posição do ponto
circle at X% Y%
Onde a cor é mais forte
Cor do ponto
primeira parada de cor
O tom pintado naquele local
Alcance
segunda parada, por exemplo 55%
Fração da distância até o canto mais distante em que a cor fica totalmente transparente
Cor de base
O que aparece onde nenhum ponto alcança
Ordem dos pontos
ordem das camadas
Pontos anteriores cobrem os seguintes onde se sobrepõem
Porto
Damasco
Turno da noite
Prado
Editor de mesh gradient
Arraste os pontos de cor numerados no canvas, defina a cor e o alcance de cada um e copie o CSS ou baixe um PNG. Presets: Porto, Damasco, Turno da noite, Prado.