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

[Canonical HTML page](https://gradiently.design/pt-br/guide/mark-materials-explained)

Dois Marks podem ter a mesma paleta e parecer completamente diferentes, porque o material decide como a cor se comporta. Um passeio pelas famílias, por como camadas, luz e granulação se combinam e pelo que cada uma diz.

## The short version

- Um material de gradiente é a estrutura que a cor preenche: um brilho, um clarão, uma trama, uma pedra, uma granulação.
- Todo Mark do Gradiently é construído com até três camadas de material empilhadas, uma base e até duas mais misturadas por cima.
- Os materiais do Gradiently são agrupados em catorze famílias, de Gradiente e Luz a Têxtil, Mineral, Vidro, Metal e Pintura.
- Luz, granulação e movimento são ajustados em cada camada, então o mesmo material pode ser discreto ou dramático.
- Escolha um material pelo que a superfície sugere: granulação para impressão e artesanato, seda para luxo, vidro e cromado para tecnologia.

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.

- Seda: um brilho direcional: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)`
- Aurora: luz subindo de uma barra: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)`
- Mesh: flores suaves: `radial-gradient(circle at 30% 35%, #d9822b 0%, transparent 40%), radial-gradient(circle at 70% 65%, #2f5d62 0%, transparent 45%), linear-gradient(135deg, #1b2a3a 0%, #2f5d62 100%)`
- Halo: uma poça de luz: `radial-gradient(circle at 50% 40%, #d9822b 0%, #6b3410 30%, #0b1419 70%)`

Esboços em CSS de quatro materiais na mesma paleta. Os Marks de verdade renderizam estruturas bem mais ricas, mas até estes mostram o quanto o material decide.

## 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](/market); cada família guarda muitos outros.

| Família | O que é | Materiais que você vai encontrar |
| --- | --- | --- |
| Gradiente | Fusões, esferas e campos de cor | Cantos, Esferas, Granulado, Pérola |
| Luz | Brilhos, clarões e feixes | Halo, Palco, Neon, Raios |
| Fluido | Líquidos, tinta e metal | Tinta, Mercúrio, Calda, Lava |
| Atmosfera | Neblina, nuvens e céu | Névoa, Crepúsculo, Cúmulo, Névoa no lago |
| Cósmico | Gás, estrelas e espaço profundo | Nebulosa, Galáxia, Via Láctea, Eclipse |
| Orgânico | Crescimento, células e pétalas | Células, Coral, Rosa, Samambaia |
| Mineral | Pedra, mármore e areia | Veio, Areia, Ágata, Travertino |
| Têxtil | Seda, trama e tricô | Seda, Linho, Veludo, Cetim |
| Vidro | Geada, prisma e água | Fosco, Prisma, Canelado, Vitral |
| Geométrico | Linhas, pontos e ladrilhos | Retícula, Arcos, Grade, Truchet |
| Granulação | Papel, impressão e filme | Fibra, Riso, Analógico, Dither |
| Metal | Escovado, anodizado e fundido | Escovado, Anodizado, Fundido, Pátina |
| Pintura | Óleo, guache e pincel | Empasto, Guache, Acrílico, Tinta em spray |
| Digital | Telas, falhas e pixels | CRT, Falha digital, Pixels ordenados, Parede LED |

As famílias com os nomes que o Gradiently usa. A granulação é uma família própria e também um ajuste dentro de cada camada.

### 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](https://gradiently.design/pt-br/guide/silk-gradient), [gradientes de aurora](https://gradiently.design/pt-br/guide/aurora-gradients) e [gradientes de malha](https://gradiently.design/pt-br/guide/mesh-gradients) 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](https://gradiently.design/pt-br/guide/grainy-gradients) 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.

```css
.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;
}
```

Três camadas empilhadas em CSS, a de cima primeiro: a mesma estrutura de base, textura e luz que um Mark usa, na forma mais simples.

## 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.

Um design vertical calmo com um gradiente suave e amplo e uma única palavra, Calmo

Um Mark calmo: estrutura ampla e luz suave deixam bastante espaço para as palavras.

Um design vertical vívido com textura detalhada e brilhante e uma única palavra, Intenso

Um Mark mais animado: detalhe mais fino e luz mais forte combinam com lançamentos e eventos.

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

### Calmo, para o dia a dia

- Mesh, Névoa, Areia, Linho, Fibra
- Formas amplas, pouco detalhe
- Fácil atrás de títulos longos
- Bom para posts diários e cardápios

### Marcante, de ocasião

- Aurora, Neon, Cromado, Falha digital, Película holográfica
- Luz forte, estrutura fina
- Melhor com pouquíssimas palavras
- Bom para lançamentos, eventos, capas

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](https://gradiently.design/pt-br/guide/pick-the-right-mark) percorre o resto da decisão, e o Mercado permite filtrar direto por material.

## FAQ

### O que é um material de gradiente?

A estrutura que as cores de um gradiente preenchem, como um brilho, um clarão, uma trama ou uma pedra. Ele decide se a cor parece seda, vidro, papel ou luz.

### Quantas camadas um Mark pode ter?

Até três: uma camada base e até duas por cima, cada uma com sua opacidade e modo de mesclagem.

### Qual a diferença entre seda e aurora?

A seda é um brilho direcional sobre fios finos. A aurora são cortinas de luz subindo de uma borda clara para um céu escuro.

### A granulação dificulta a leitura do texto?

Um pouco de granulação raramente dificulta, e ela esconde o banding. Os Marks também suavizam o detalhe agitado atrás das palavras, então o texto continua legível.

### Posso buscar no Mercado por material?

Pode. O Mercado pode ser filtrado por material, além de cor, fundo, clima e estilo, e pesquisado com palavras como “seda azul”.