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

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

Dois Marks podem partilhar a paleta e não se parecer em nada, porque é o material que decide como a cor se comporta. Uma volta pelas famílias, por como camadas, luz e grã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 halo, uma trama, uma pedra, um grão.
- Cada Mark do Gradiently é construído com até três camadas de material empilhadas, uma base e até duas misturadas por cima.
- Os materiais do Gradiently estão agrupados em catorze famílias, de Gradiente e Luz a Têxtil, Mineral, Vidro, Metal e Pintura.
- Luz, grão e movimento definem-se dentro de cada camada, por isso o mesmo material pode ser sossegado ou dramático.
- Escolhe um material pelo que a sua superfície sugere: grã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 apenas uma mistura entre duas cores. Um material é a estrutura que a cor preenche: um brilho direcional na Seda, cortinas de luz na Aurora, manchas suaves no Mesh, areia na Areia, veios no mármore. Cada Mark do Gradiently empilha até três deles e depois acrescenta luz, grão e movimento, e é por isso que dois Marks com a mesma paleta podem não se parecer em nada.

## O que é um material

Pensa na paleta como a tinta e no material como a superfície onde é aplicada. Despeja o mesmo azul-marinho, verde-azulado e laranja sobre seda, vidro fosco ou papel feito à mão e obténs três objetos diferentes. Num Mark, cada material vai buscar cores à paleta do próprio Mark, por isso mudar o material muda o carácter sem mudar as cores.

- Seda: um brilho direcional: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)`
- Aurora: luz a subir da orla: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)`
- Mesh: manchas 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 reais desenham uma estrutura muito mais rica, mas até estes mostram quanto o material decide.

## As catorze famílias de materiais

O Gradiently agrupa os materiais em famílias, conforme aquilo a que se assemelham. Os nomes abaixo são materiais reais que vais encontrar no [Mercado](/market); cada família tem muitos mais.

| Família | O que é | Materiais que vais encontrar |
| --- | --- | --- |
| Gradiente | Misturas, esferas e campos de cor | Cantos, Esferas, Granulado, Pérola |
| Luz | Brilhos, reflexos e feixes | Halo, Palco, Néon, Raios |
| Fluido | Líquidos, tinta e metal | Tinta, Mercúrio, Calda, Lava |
| Atmosfera | Nevoeiro, nuvem 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, Feto |
| Mineral | Pedra, mármore e areia | Veio, Areia, Ágata, Travertino |
| Têxtil | Seda, trama e malha | Seda, Linho, Veludo, Cetim |
| Vidro | Gelo, prisma e água | Fosco, Prisma, Canelado, Vitral |
| Geométrico | Linhas, pontos e azulejos | Retícula, Arcos, Grelha, Truchet |
| Grão | Papel, impressão e película | 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 | Ecrãs, falhas e píxeis | CRT, Falha digital, Pixels ordenados, Parede LED |

As famílias tal como o Gradiently as nomeia. O Grão é uma família à parte e também uma definição dentro de cada camada.

### Seda, aurora e mesh

Estes três são os que mais perguntam. A **Seda** é um brilho direcional sobre fios finos: elegante, um pouco formal, à vontade em beleza e moda. A **Aurora** são cortinas de luz a subir de uma orla brilhante para um céu escuro, dramática sobre um fundo vazio. O **Mesh** são manchas suaves de cor que se fundem umas nas outras, o gradiente moderno clássico, simpático e versátil. [Gradientes de seda](https://gradiently.design/pt-pt/guide/silk-gradient), [gradientes aurora](https://gradiently.design/pt-pt/guide/aurora-gradients) e [gradientes mesh](https://gradiently.design/pt-pt/guide/mesh-gradients) têm cada um o seu guia, com CSS.

### Grão, papel e impressão

A família Grão faz um ecrã parecer impresso. A **Fibra** é papel feito à mão, com fibras longas e uma ou outra mancha, o **Riso** é uma impressão a duas tintas, o **Analógico** é grão de película, o **Dither** escalona a cor em píxeis. Ficam bem em comida, artesanato, livros e tudo o que deva parecer feito à mão. Escondem também o banding, as listas que surgem em gradientes suaves, algo que [gradientes granulados](https://gradiently.design/pt-pt/guide/grainy-gradients) explica.

## Como se empilham as camadas

Um Mark tem uma camada base e até duas por cima. Cada camada superior tem a sua opacidade e um modo de mistura (normal, ecrã, multiplicar, sobrepor ou suave), a mesma ideia das camadas num editor de fotografia. 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 Fuga de luz, 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 sua forma mais simples.

## Luz, grão e movimento

Dentro de cada camada, um punhado de definições muda o comportamento do material: a escala, o quanto se deforma, quanto pormenor fino mostra, com que força é iluminado, quanto grão tem por cima e quanto se move. A mesma Seda pode ser um cintilar apertado e brilhante ou uma pendência larga e escura. O movimento é partilhado por todo o Mark, com a sua própria velocidade e deriva, para que as camadas se movam em conjunto e não umas contra as outras.

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

Um Mark calmo: estrutura ampla e luz suave deixam muito espaço às palavras.

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

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

O pormenor e as palavras competem, e é por isso que os Marks suavizam sozinhos o pormenor carregado junto ao texto. Um Mark sabe onde estão as palavras: a sua zona mais calma passa para trás do texto e as cores junto às letras aprofundam-se ou aclaram-se, para que até um material texturado mantenha o teu título legível.

## Como escolher um material

### Calmos, do dia a dia

- Mesh, Névoa, Areia, Linho, Fibra
- Formas amplas, pouco pormenor
- Fáceis atrás de títulos longos
- Bons para publicações diárias e ementas

### Marcantes, ocasionais

- Aurora, Néon, Cromado, Falha digital, Película holográfica
- Luz forte, estrutura fina
- Melhores com muito poucas palavras
- Bons para lançamentos, eventos, capas

Pergunta de que é feita a tua marca. Uma pastelaria é farinha, papel e luz quente, por isso Fibra ou Aguada. Um estúdio que vende software é vidro e luz limpa, por isso Fosco ou Prisma. Depois pergunta com que frequência vais publicar sobre ele: quanto mais vezes, mais calmo deve ser. [Como escolher o Mark certo](https://gradiently.design/pt-pt/guide/pick-the-right-mark) percorre o resto da decisão, e o Mercado permite filtrar diretamente por material.

## FAQ

### O que é um material de gradiente?

A estrutura que as cores de um gradiente preenchem, como um brilho, um halo, uma trama ou uma pedra. É ele que decide se a cor se lê como seda, vidro, papel ou luz.

### Quantas camadas pode ter um Mark?

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

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

A seda é um brilho direcional sobre fios finos. A aurora são cortinas de luz a subir de uma orla brilhante para um céu escuro.

### O grão torna o texto mais difícil de ler?

Um pouco de grão raramente o faz, e esconde o banding. Os Marks também suavizam o pormenor carregado por trás das palavras, por isso o texto continua legível.

### Posso pesquisar no Mercado por material?

Sim. O Mercado pode ser filtrado por material, bem como por cor, fundo, ambiente e estilo, e pesquisado com palavras como “seda azul”.