Mesh gradient em SVG: o que funciona hoje

Um mesh gradient em SVG de verdade não funciona nos navegadores hoje. O elemento <meshgradient> apareceu nos rascunhos do SVG 2, em que as cores ficam nos cantos de uma grade de retalhos e se misturam em cada um deles, mas Chrome, Safari e Firefox nunca o lançaram. Para conseguir o visual suave, de muitas cores, que as pessoas chamam de mesh gradient, você o constrói com o que de fato é renderizado: formas desfocadas, gradientes radiais empilhados, uma imagem rasterizada ou um shader.

O que aconteceu com o meshgradient

O elemento de malha fez parte dos rascunhos de trabalho do SVG 2 por vários anos. Ele descrevia uma superfície como fileiras de retalhos de Coons, cada um com quatro cores nos cantos e bordas curvas, que é como as malhas de gradiente funcionam nos programas de ilustração. Os fabricantes de navegadores não o implementaram, e o recurso ficou de fora da versão do SVG 2 que seguiu adiante. Se você colar a marcação de malha numa página, o navegador a ignora e preenche a forma com nada, ou com uma cor reserva se você tiver definido uma.

O Inkscape é a exceção notável do lado da criação. A ferramenta de malha dele gera marcação de malha de verdade e, quando você salva para a web, pode incluir um pequeno polyfill em JavaScript que desenha a malha no carregamento. Isso funciona, mas você está enviando script para pintar um fundo, e não vai aparecer em lugares que não executam scripts, como uma tag <img> ou muitos clientes de email.

Método 1: formas desfocadas

É o mais perto de uma malha em SVG puro. Coloque de três a cinco círculos ou elipses preenchidos onde você quer cada cor e depois desfoque bastante o grupo. O desfoque mistura as cores vizinhas exatamente como uma malha faz, e você pode mover cada mancha de forma independente.

<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <defs>
    <filter id="soften" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="120" />
    </filter>
  </defs>
  <rect width="1200" height="800" fill="#0f0b1e" />
  <g filter="url(#soften)">
    <circle cx="260" cy="200" r="260" fill="#7c3aed" />
    <circle cx="900" cy="160" r="240" fill="#f472b6" />
    <ellipse cx="760" cy="640" rx="360" ry="220" fill="#0ea5e9" />
    <circle cx="200" cy="700" r="200" fill="#312e81" />
  </g>
</svg>

Desfoque tem custo. Um feGaussianBlur grande é recalculado sempre que o SVG é redesenhado, então use isso em fundos estáticos, não em algo que rola ou se anima. Para a mesma ideia feita só com CSS, veja gradientes desfocados.

Método 2: gradientes radiais empilhados

Cada <radialGradient> pode ir de uma cor até o transparente. Preencha vários retângulos do tamanho total, um por gradiente, e eles se sobrepõem formando uma malha. Não há filtro envolvido, então a renderização é mais leve que o desfoque e fica nítida em qualquer zoom.

<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <defs>
    <radialGradient id="a" cx="0.2" cy="0.25" r="0.6">
      <stop offset="0" stop-color="#7c3aed" />
      <stop offset="1" stop-color="#7c3aed" stop-opacity="0" />
    </radialGradient>
    <radialGradient id="b" cx="0.8" cy="0.2" r="0.55">
      <stop offset="0" stop-color="#f472b6" />
      <stop offset="1" stop-color="#f472b6" stop-opacity="0" />
    </radialGradient>
    <radialGradient id="c" cx="0.6" cy="0.85" r="0.65">
      <stop offset="0" stop-color="#0ea5e9" />
      <stop offset="1" stop-color="#0ea5e9" stop-opacity="0" />
    </radialGradient>
  </defs>
  <rect width="1200" height="800" fill="#0f0b1e" />
  <rect width="1200" height="800" fill="url(#a)" />
  <rect width="1200" height="800" fill="url(#b)" />
  <rect width="1200" height="800" fill="url(#c)" />
</svg>

Isso se traduz quase um para um em CSS, que muitas vezes é o melhor lugar para ele. Mesh gradients em CSS mostra as mesmas camadas com radial-gradient() e explica como controlar onde as cores se sobrepõem. A versão em SVG vale a pena quando o fundo precisa viajar como arquivo, como um download ou um recurso num design system. Mais sobre os elementos de gradiente em gradientes SVG.

Método 3: exportar uma imagem

Se você desenhou uma malha de gradiente de verdade numa ferramenta de ilustração e ela nunca precisa mudar, exporte como imagem. Uma malha de 1920×1080 comprime bem em WebP e fica suave em PNG; você pode incorporá-la com um elemento SVG <image> ou usá-la como fundo em CSS. Você perde a independência de resolução, mas mantém cada curva da malha original.

Como escolher o método certo

1. 1

   Escolha de três a cinco cores

   Matizes vizinhos se misturam bem. Opostos se encontram num meio turvo, como explica gradientes turvos.

2. 2

   Posicione cores, não paradas

   Decida onde cada cor fica na tela. Essa é toda a diferença entre uma malha e um gradiente linear.

3. 3

   Deixe uma área calma

   Mantenha uma região próxima da cor de fundo onde vai ficar o título.

4. 4

   Termine com granulado

   Um pouco de ruído faz a superfície parecer intencional e esconde o banding.

Quando você quer um fundo no estilo malha sem montá-lo à mão, um Mark do Gradiently é uma receita de cores, luz, material e granulado que é renderizada ao vivo em qualquer tamanho, mantém a área mais calma atrás das suas palavras e exporta com o Pro em PNG, SVG ou PDF. Para malhas animadas num site, gradientes com shader são o próximo passo.