Materiais de gradiente explicados: seda, aurora, granulação e mais

Os materiais de gradiente são o que faz um gradiente parecer algo, e não só uma mistura entre duas cores. Um material é a estrutura que a cor preenche: um brilho direcional na Seda, cortinas de luz na Aurora, flores suaves no Mesh, grãos de areia na Areia, veios no mármore. Todo Mark do Gradiently empilha até três deles e depois acrescenta luz, granulação e movimento, e por isso dois Marks com a mesma paleta podem parecer totalmente diferentes.

O que é um material

Pense na paleta como a tinta e no material como a superfície em que ela é aplicada. Derrame o mesmo azul-marinho, verde-azulado e laranja sobre seda, vidro fosco ou papel feito à mão e você terá três objetos diferentes. Num Mark, cada material usa a paleta do próprio Mark, então trocar o material muda o caráter sem mudar as cores.

As catorze famílias de materiais

O Gradiently agrupa seus materiais em famílias pelo que se parecem. Os nomes abaixo são materiais reais que você encontrará no Mercado; cada família guarda muitos outros.

Seda, aurora e mesh

Estes três são os mais perguntados. A Seda é um brilho direcional sobre fios finos: elegante, um pouco formal, à vontade com beleza e moda. A Aurora são cortinas de luz subindo de uma barra clara para um céu escuro, dramática sobre um fundo vazio. O Mesh são flores suaves de cor derretendo umas nas outras, o gradiente moderno clássico, amigável e versátil. Gradientes de seda, gradientes de aurora e gradientes de malha têm cada um seu guia com CSS.

Granulação, papel e impressão

A família Granulação faz uma tela parecer impressa. A Fibra é papel feito à mão, com fibras longas e uma pinta ou outra; o Riso é uma impressão em duas tintas; o Analógico é grão de filme; o Dither distribui a cor em pixels. Combinam com comida, artesanato, livros e tudo o que deve parecer feito à mão. Também escondem o banding, as listras que aparecem em gradientes lisos, o que gradientes granulados explica.

Como as camadas se empilham

Um Mark tem uma camada base e até duas por cima. Cada camada superior tem sua própria opacidade e um modo de mesclagem (normal, tela, multiplicar, sobrepor ou suave), a mesma ideia das camadas de um editor de fotos. Uma receita comum é uma base ampla, como Mesh ou Névoa, para o campo de cor, uma camada estrutural, como Linho ou Retícula, para a textura, e uma camada de luz, como Halo ou Vazamento, para dar foco.

.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}

Luz, granulação e movimento

Dentro de cada camada, alguns ajustes mudam o comportamento do material: a escala, o quanto ele deforma, quanto detalhe fino mostra, quão forte é iluminado, quanta granulação tem por cima e o quanto se move. A mesma Seda pode ser um brilho intenso e fechado ou um caimento amplo e suave. O movimento é compartilhado por todo o Mark, com velocidade e deriva próprias, então as camadas se movem juntas, e não umas contra as outras.

Detalhe e palavras competem, por isso os Marks suavizam sozinhos o detalhe agitado perto do texto. Um Mark sabe onde estão as palavras: sua região mais calma se move para trás do texto e as cores perto das letras escurecem ou clareiam, então até um material texturizado mantém seu título legível.

Como escolher um material

Pergunte do que a sua marca é feita. Uma padaria é farinha, papel e luz quente, então Fibra ou Aguada. Um estúdio que vende software é vidro e luz limpa, então Fosco ou Prisma. Depois pergunte com que frequência você vai postar nele: quanto mais vezes, mais calmo ele deve ser. Como escolher o Mark certo percorre o resto da decisão, e o Mercado permite filtrar direto por material.