Gradiente de malha em CSS: como criar um com camadas radiais

Um gradiente de malha em CSS é um fundo em que a cor se mistura em várias direções ao mesmo tempo, como se poças de pigmento tivessem se encharcado umas nas outras. O CSS não tem função de malha, e os gradientes de malha que chegaram a ser rascunhados para o SVG nunca saíram nos navegadores, então a versão para a web é uma imitação: de três a cinco camadas de radial-gradient() empilhadas sobre uma cor lisa, cada uma esmaecendo para transparent. Bem feita, chega perto o bastante para ninguém notar, pesa algumas centenas de bytes e continua nítida em qualquer tamanho.

Se você quer a teoria de design primeiro, o que é uma malha e por que ela parece orgânica, leia gradientes de malha. Este guia é sobre construir um em código.

Como funciona o método das camadas

Cada camada é um ponto de cor. A posição dela é o valor at, o alcance é a distância do esmaecimento e a força é o alfa da cor. Como o primeiro gradiente do background-image é pintado por cima, a ordem importa menos do que você imagina aqui: cada camada é quase toda transparente, então elas se misturam onde se sobrepõem. O background-color de base aparece onde nenhuma poça chega.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at 15% 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(circle at 85% 25%, rgb(236 72 153 / 0.75), transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%),
    radial-gradient(circle at 25% 80%, rgb(245 158 11 / 0.55), transparent 45%);
}

Passo a passo: crie o seu gradiente de malha em CSS

1. 1

   Escolha um fundo

   Escolha a cor lisa que aparece entre as poças. Fundos escuros fazem as poças brilharem; fundos claros as fazem parecer aquarela. O fundo também é sua alternativa se os gradientes falharem.

2. 2

   Escolha de três a cinco cores relacionadas

   Matizes vizinhos se misturam de forma limpa. Opostos, como azul e laranja, se encontram em uma mancha cinza. Gradientes turvos explica por quê e como evitar.

3. 3

   Posicione as poças fora do centro

   Empurre os pontos para os cantos e as bordas e deixe pelo menos um parcialmente fora da caixa, como at 110% 0%. Poças centralizadas parecem um alvo.

4. 4

   Varie o alcance e a força

   Dê a uma cor o maior esmaecimento e o maior alfa para que ela lidere. Mantenha o destaque pequeno e mais fraco. Poças iguais parecem mecânicas.

5. 5

   Misture em um espaço de cor melhor

   Acrescente in oklab a cada camada, como em radial-gradient(in oklab circle at 15% 20%, ...), onde houver suporte. As sobreposições ficam mais brilhantes que em sRGB.

6. 6

   Termine com grão

   Esmaecimentos grandes e suaves formam faixas em muitas telas. Uma camada leve de ruído resolve e dá uma sensação de impresso; veja abaixo.

Misturas mais suaves com desfoque

Os esmaecimentos radiais são suaves, mas as formas deles são obviamente redondas. Um desfoque suaviza os círculos em algo mais orgânico. Coloque as camadas em um pseudoelemento, desfoque-o e superdimensione-o com um inset negativo para que as bordas desfocadas não esmaeçam na página. O isolation: isolate mantém o z-index negativo dentro do componente.

.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b1026;
}

.mesh::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 25%, #7c3aed, transparent 40%),
    radial-gradient(circle at 80% 30%, #ec4899, transparent 35%),
    radial-gradient(circle at 55% 85%, #06b6d4, transparent 40%);
  filter: blur(48px);
}

Adicionando grão a um gradiente de malha em CSS

O grão faz duas coisas. Ele quebra os degraus visíveis que aparecem em esmaecimentos largos e de baixo contraste e dá à superfície a qualidade tátil, de filme, que faz os gradientes parecerem pensados e não padrão. Em CSS, a fonte habitual é um filtro SVG feTurbulence usado como uma pequena imagem de fundo, sobreposta com baixa opacidade. A técnica completa está em textura de ruído em CSS, e o raciocínio de design em gradientes com grão.

Animando um gradiente de malha

As posições de um gradiente não são animáveis por si sós, mas as propriedades personalizadas registradas são. Declare cada coordenada móvel com @property, use-a dentro do gradiente e anime a propriedade. Mantenha o movimento lento e desligue-o para quem pede movimento reduzido.

@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 15%;
}

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at var(--x1) 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
  to { --x1: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh { animation: none; }
}

Cada quadro dessa animação repinta o fundo inteiro. Em um card pequeno isso é trivial; em um hero de tela cheia vale medir. O guia de gradiente animado trata de alternativas mais baratas, como mover uma camada superdimensionada com transform.

Quando usar uma imagem ou WebGL

Os shaders são tratados em gradientes WebGL. Um caminho do meio é projetar o fundo uma vez como um material vivo e exportá-lo: os Marks do Gradiently são materiais tipo malha com cor, grão, luz e movimento, e um design feito com um deles exporta como PNG, JPEG ou um vídeo em loop contínuo de 5 a 30 segundos.

GR·Y97R·RQ

August Basin

Ver este Mark