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

Um gradiente de malha em CSS é um fundo onde a cor se mistura em várias direções ao mesmo tempo, como se poças de pigmento se tivessem embebido umas nas outras. O CSS não tem uma função de malha, e os gradientes de malha outrora esboçados para o SVG nunca chegaram aos navegadores, por isso a versão web é uma imitação: três a cinco camadas de radial-gradient() empilhadas sobre uma cor lisa, cada uma a esbater para transparent. Bem feita, é suficientemente próxima para ninguém notar, pesa algumas centenas de bytes e mantém-se nítida em qualquer tamanho.

Se queres primeiro a teoria de design, o que é uma malha e porque parece orgânica, lê os gradientes de malha. Este guia trata de construir um em código.

Como funciona o método das camadas

Cada camada é um ponto de cor. A sua posição é o valor at, o seu alcance é a distância do esbatido e a sua força é o alfa da cor. Como o primeiro gradiente em background-image é pintado por cima, a ordem importa aqui menos do que poderias pensar: todas as camadas são em grande parte transparentes, por isso misturam-se 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: cria o teu próprio gradiente de malha em CSS

1. 1

   Escolhe um fundo

   Escolhe a cor lisa que aparece entre as poças. Os fundos escuros fazem as poças brilhar; os fundos claros fazem-nas parecer aguarela. O fundo é também a tua reserva se os gradientes falharem.

2. 2

   Escolhe três a cinco cores relacionadas

   Os matizes vizinhos misturam-se de forma limpa. Os opostos, como azul e laranja, encontram-se numa mancha cinzenta. Os gradientes lamacentos explicam porquê e como evitar.

3. 3

   Coloca as poças fora do centro

   Empurra os pontos para os cantos e as arestas e deixa pelo menos um parcialmente fora da caixa, como at 110% 0%. As poças centradas parecem um alvo.

4. 4

   Varia o alcance e a força

   Dá a uma cor o maior esbatido e o alfa mais alto para que lidere. Mantém o destaque pequeno e mais fraco. Poças iguais parecem mecânicas.

5. 5

   Mistura num espaço de cor melhor

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

6. 6

   Acaba com grão

   Os esbatidos grandes e suaves fazem faixas em muitos ecrãs. Uma ténue sobreposição de ruído resolve isso e dá uma sensação de impressão; vê abaixo.

Misturas mais suaves com desfocado

Os esbatidos radiais são suaves mas as suas formas são obviamente redondas. Um desfocado suaviza os círculos em algo mais orgânico. Põe as camadas num pseudoelemento, desfoca-o e aumenta-lhe o tamanho com um inset negativo para que as arestas desfocadas não se esbatam 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);
}

Acrescentar grão a um gradiente de malha em CSS

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

Animar um gradiente de malha

As posições dos gradientes não são animáveis por si, mas as propriedades personalizadas registadas são. Declara cada coordenada que se move com @property, usa-a dentro do gradiente e anima a propriedade. Mantém o movimento lento e desliga-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 fotograma desta animação repinta o fundo inteiro. Num cartão pequeno isso é trivial; num herói de ecrã inteiro vale a pena medir. O guia sobre o gradiente animado trata de alternativas mais baratas, como mover uma camada sobredimensionada com transform.

Quando usar uma imagem ou WebGL

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

GR·Y97R·RQ

August Basin

Ver este Mark