# Textura em gradientes: grão, papel, vidro e seda explicados

[Canonical HTML page](https://gradiently.design/pt-pt/guide/gradient-texture)

Dois gradientes com cores idênticas podem parecer um fotograma de filme, um cartão de tipografia, um ecrã de telemóvel ou um vestido de noite. A diferença é a textura, e diz mais do que as cores.

## The short version

- A textura de um gradiente é qualquer detalhe de superfície sobre uma mistura de cores, como grão, fibra de papel, vidro ou brilho de seda, que a faz ler-se como um material.
- Cada família de texturas traz as suas associações: o grão sugere película e impressão, o papel sugere artesanato, o vidro sugere tecnologia e a seda sugere luxo.
- A textura muda o carácter de um gradiente mais do que uma mudança de cor, e por isso é das coisas mais difíceis de copiar.
- As texturas podem empilhar-se, normalmente como uma estrutura, como seda ou caneluras, uma superfície, como grão ou papel, e uma luz por cima.
- A textura deve sair do caminho das palavras: mais leve por trás do texto, mais forte nas zonas abertas.

A **textura de um gradiente** é a superfície que pões sobre uma mistura de cores para que se leia como um material e não como uma predefinição de ecrã: um grão fino como o da película, a textura do papel, a clareza e a refração do vidro ou as dobras suaves da seda. As cores dizem qual é o ambiente; a textura diz de que é feita a coisa. É por isso que dois gradientes com cores idênticas podem parecer completamente diferentes, e que a textura é das partes mais distintivas de uma identidade visual.

## As quatro famílias de texturas

| Textura | Como se vê | O que diz | Serve para |
| --- | --- | --- | --- |
| Grão | Pontilhado fino e aleatório sobre a cor | Película, impressão, calor analógico | Editorial, música, fotografia, a maioria das marcas |
| Papel | Fibras suaves e textura, base de branco quente | Artesanato, calma, algo feito à mão | Papelaria, comida, livros, estúdios |
| Vidro | Clareza, desfoque, refração, realces nítidos | Tecnologia, precisão, profundidade | Aplicações, software, hardware, finanças |
| Seda | Dobras lisas com realces suaves em movimento | Luxo, suavidade, sensualidade | Beleza, moda, perfumaria, joalharia |

Quatro famílias, quatro vozes. Escolhe a que corresponde ao material de que a tua marca seria feita se fosse um objeto.

## Grão: película e impressão

O grão é a textura mais versátil e a mais fácil de acrescentar. Uma camada fina de ruído monocromático faz uma mistura parecer fotografada ou impressa, e esconde também o banding que os gradientes digitais lisos costumam mostrar. Funciona com quase qualquer paleta, e é por isso que se tornou o toque final por defeito. Quanto usar, e como, está em [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients).

## Papel: artesanato e calma

A textura de papel traz uma base de branco quente, fibras suaves e uma ligeira irregularidade, como se o gradiente tivesse sido impresso ou pintado. Combina naturalmente com cores claras, tintas suaves e letra com serifa. Mantém as manchas de cor pequenas e deixa o papel aparecer; um gradiente pastel ou terroso sobre papel parece feito à mão como um fundo de branco puro nunca parece. Vê [gradientes pastel](https://gradiently.design/pt-pt/guide/pastel-gradients) para paletas que lhe assentam.

- Papel: mancha de alperce: `radial-gradient(circle at 20% 25%, #f3c9a8 0%, #f5ebe0 45%, #efe6da 100%)`
- Seda: cetim cor de vinho: `linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%)`
- Vidro: canelado: `repeating-linear-gradient(90deg, #0f3d4c 0px, #1f6f86 14px, #8fd3e8 18px, #1f6f86 22px, #0f3d4c 36px)`
- Vidro: vidraça com reflexo: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 45%, #93c5fd 49%, #1e3a8a 53%, #0f172a 100%)`

Esboços de texturas com gradientes CSS simples. O cetim vem de faixas nítidas e brilhantes entre dobras mais escuras; o vidro canelado de realces estreitos repetidos; uma vidraça de um único reflexo fino.

## Vidro: tecnologia e profundidade

As texturas de vidro são de dois tipos. O vidro fosco desfoca o que está por trás, e é a base do [glassmorphism](https://gradiently.design/pt-pt/guide/glassmorphism). O vidro claro ou canelado refrata a cor em faixas e acrescenta realces nítidos onde a luz apanha um limite. Ambos sugerem precisão e hardware moderno. O segredo está no realce: uma linha fina e brilhante colocada onde a luz bateria, e cor mais escura em todo o lado.

## Seda: luxo e suavidade

A seda e o cetim parecem dobras lisas de tecido: sombras largas e suaves, e realces brilhantes e estreitos onde o pano se vira para a luz. No ecrã, isso significa um gradiente com faixas nítidas de luz entre tons mais profundos, muitas vezes num só tom. As cores profundas de joia, como vinho, esmeralda e meia-noite, lêem-se como traje de gala; as claras, como champanhe e rubor, lêem-se como noiva ou cuidados de pele. A seda funciona lindamente em câmara lenta, onde os realces podem derivar.

## Como empilhar texturas

Os materiais reais combinam texturas: a seda tem brilho e trama, o papel impresso tem fibras e grão de tinta. Os gradientes podem fazer o mesmo, desde que cada camada tenha uma função clara. Uma ordem fiável é cor, depois estrutura, depois superfície, depois luz.

1. **Campo de cor** A própria mistura: o teu gradiente, malha ou brilho. Acerta isto primeiro; a textura não corrige uma paleta embaciada.
2. **Estrutura** A forma em grande escala do material: dobras de seda, caneluras de vidro, a suave irregularidade do papel. Muda a forma como a cor flui.
3. **Superfície** O detalhe fino: grão ou textura de papel. Fica por cima de tudo e faz a superfície parecer física.
4. **Luz** Realces e sombras que dizem ao olhar de onde vem a luz. Uma única fonte de luz consistente faz todas as camadas lerem-se como um só objeto.

```css
.silk {
  position: relative;
  isolation: isolate;
  /* colour and structure: satin folds in one hue */
  background: linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%);
}

.silk::after {
  /* surface: fine monochrome grain */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.25;
}
```

Duas camadas empilhadas: uma estrutura de cetim no gradiente e uma superfície de grão fino misturada por cima em Luz suave.

## Textura e legibilidade

A textura acrescenta detalhe, e o detalhe por trás de letras pequenas torna-as mais difíceis de ler. Mantém a textura mais leve por trás do texto e mais forte nas zonas abertas, e mantém o texto e os logótipos acima de todas as camadas de textura para os contornos ficarem nítidos. Os realces fortes de seda e os reflexos de vidro são o maior risco, porque criam linhas brilhantes que podem cortar uma palavra. Vê [texto sobre fundos movimentados](https://gradiently.design/pt-pt/guide/type-on-busy-backgrounds).

Uma publicação com citação em que o fundo texturizado corre em força total por trás das palavras

Textura em força total por trás das palavras: a superfície compete com a frase.

A mesma publicação com citação com uma zona mais calma do fundo texturizado por trás das palavras

O mesmo material a relaxar por trás das palavras: textura onde há espaço, calma onde há texto.

## A textura como identidade

As cores podem ser recolhidas de uma captura de ecrã em segundos. Uma textura, e a forma como se comporta com a luz e o movimento, é muito mais difícil de reproduzir. Isso faz da textura uma das formas mais fortes de tornar teu um gradiente. Cada Mark da Gradiently empilha até três materiais sobre as suas cores, com luz e grão próprios, e a Forge deixa-te escolhê-los controlo a controlo.

Um Mark é cores mais materiais, luz, grão e movimento. São os materiais que o fazem parecer um objeto.

## FAQ

### O que é a textura de um gradiente?

É o detalhe de superfície sobre uma mistura de cores, como grão, papel, vidro ou seda, para o gradiente se ler como um material.

### Que textura devo usar num gradiente?

Escolhe a textura pelo material de que a tua marca seria feita: grão para película e impressão, papel para artesanato, vidro para tecnologia, seda para luxo.

### Como acrescento textura a um gradiente em CSS?

Sobrepõe uma imagem de ruído ou de padrão ao gradiente com um modo de mistura como Luz suave ou Sobreposição, com pouca opacidade.

### Posso combinar texturas num só gradiente?

Sim. Empilha-as pela função: campo de cor, depois estrutura como as dobras de seda, depois superfície como o grão, depois luz.

### A textura torna o texto mais difícil de ler?

Pode tornar. Mantém a textura mais leve por trás das palavras e mantém o texto acima de todas as camadas de textura.