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

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

Dois gradientes com cores idênticas podem parecer um fotograma de filme, um cartão de tipografia, uma tela de celular ou um vestido de noite. A diferença é a textura, e ela diz mais que as cores.

## The short version

- Textura em gradiente é qualquer detalhe de superfície posto sobre uma mistura de cores, como grão, fibra de papel, vidro ou um brilho de seda, que a faz parecer um material.
- Cada família de textura carrega suas associações: o grão sugere filme e impressão, o papel sugere artesanato, o vidro sugere tecnologia e a seda sugere luxo.
- A textura muda o caráter de um gradiente mais do que uma troca de cor, e por isso é uma das coisas mais difíceis de copiar.
- Texturas podem ser empilhadas, em geral 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 atrás do texto, mais forte nas áreas abertas.

**Textura em gradiente** é a superfície que você põe sobre uma mistura de cores para que ela pareça um material, e não um padrão de tela: um grão fino como o de filme, a aspereza do papel, a clareza e a refração do vidro ou as dobras suaves da seda. As cores dizem que clima você quer; a textura diz de que a coisa é feita. É por isso que dois gradientes com cores idênticas podem parecer completamente diferentes, e por isso a textura é uma das partes mais distintivas de uma identidade visual.

## As quatro famílias de textura

| Textura | Como se parece | O que diz | Combina com |
| --- | --- | --- | --- |
| Grão | Pontilhado fino e aleatório sobre a cor | Filme, impressão, calor analógico | Editorial, música, fotografia, a maioria das marcas |
| Papel | Fibras suaves e aspereza, base branco-quente | Artesanato, calma, algo feito à mão | Papelaria, comida, livros, estúdios |
| Vidro | Clareza, desfoque, refração, brilhos nítidos | Tecnologia, precisão, profundidade | Apps, software, hardware, finanças |
| Seda | Dobras lisas com brilhos suaves em movimento | Luxo, suavidade, sensualidade | Beleza, moda, perfumaria, joalheria |

Quatro famílias, quatro vozes. Escolha a que combina com aquilo de que a sua marca seria feita se fosse um objeto.

## Grão: filme e impressão

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

## Papel: artesanato e calma

A textura de papel traz uma base branco-quente, fibras suaves e uma leve irregularidade, como se o gradiente tivesse sido impresso ou pintado. Combina naturalmente com cores claras, tintas sóbrias e fontes com serifa. Mantenha as manchas de cor pequenas e deixe o papel aparecer; um gradiente pastel ou terroso sobre papel parece feito à mão de um jeito que um fundo branco puro nunca parece. Veja [gradientes pastel](https://gradiently.design/pt-br/guide/pastel-gradients) para paletas que combinam.

- Papel: mancha de damasco: `radial-gradient(circle at 20% 25%, #f3c9a8 0%, #f5ebe0 45%, #efe6da 100%)`
- Seda: cetim 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: placa com reflexo: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 45%, #93c5fd 49%, #1e3a8a 53%, #0f172a 100%)`

Esboços de textura com gradientes CSS únicos. O cetim vem de faixas nítidas e brilhantes entre dobras mais escuras; o vidro canelado, de brilhos estreitos repetidos; uma placa, 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á atrás dele, e é a base do [glassmorphism](https://gradiently.design/pt-br/guide/glassmorphism). O vidro claro ou canelado refrata a cor em faixas e acrescenta brilhos nítidos onde a luz pega uma borda. Ambos sugerem precisão e hardware moderno. O segredo é o brilho: uma linha fina e clara posta onde a luz bateria, e cor mais escura em todo o resto.

## Seda: luxo e suavidade

Seda e cetim parecem dobras lisas de tecido: sombras largas e suaves, e brilhos estreitos e claros onde o pano se vira para a luz. Na tela, isso é um gradiente com faixas de luz nítidas entre tons mais profundos, muitas vezes em um só matiz. Cores profundas de joia, como vinho, esmeralda e azul-meia-noite, lembram roupa de festa; as claras, como champanhe e rubor, lembram noivas ou cuidados com a pele. A seda funciona lindamente em câmera lenta, quando os brilhos podem derivar.

## Como empilhar texturas

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

1. **Campo de cor** A mistura em si: seu gradiente, malha ou brilho. Acerte isso primeiro; a textura não conserta uma paleta suja.
2. **Estrutura** A forma em grande escala do material: dobras de seda, caneluras de vidro, a leve irregularidade do papel. Ela muda como a cor flui.
3. **Superfície** O detalhe fino: grão ou aspereza de papel. Fica por cima de tudo e faz a superfície parecer física.
4. **Luz** Brilhos e sombras que dizem ao olho de onde vem a luz. Uma única fonte de luz consistente faz todas as camadas parecerem 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 com Luz suave.

## Textura e legibilidade

A textura acrescenta detalhe, e detalhe atrás de letras pequenas as torna mais difíceis de ler. Mantenha a textura mais leve atrás do texto e mais forte nas áreas abertas, e deixe texto e logos acima de todas as camadas de textura para as bordas continuarem nítidas. Brilhos fortes de seda e reflexos de vidro são o maior risco, porque criam linhas claras que podem cortar uma palavra. Veja [texto sobre fundos agitados](https://gradiently.design/pt-br/guide/type-on-busy-backgrounds).

Um post de citação em que o fundo texturizado age em força total atrás das palavras

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

O mesmo post de citação com uma área mais calma do fundo texturizado atrás das palavras

O mesmo material relaxando atrás das palavras: textura onde há espaço, calma onde há texto.

## Textura como identidade

Cores podem ser coletadas de uma captura de tela em segundos. Uma textura, e o jeito como ela 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 um gradiente seu. Todo Mark do Gradiently empilha até três materiais sobre as suas cores, com luz e grão próprios, e a Forge deixa você escolhê-los controle por controle.

Um Mark é cor mais materiais, luz, grão e movimento. Os materiais são o que o fazem parecer um objeto.

## FAQ

### O que é textura em gradiente?

Textura em gradiente é detalhe de superfície posto sobre uma mistura de cores, como grão, papel, vidro ou seda, para o gradiente parecer um material.

### Que textura devo usar em um gradiente?

Combine a textura com aquilo de que a sua marca seria feita: grão para filme e impressão, papel para artesanato, vidro para tecnologia, seda para luxo.

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

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

### Dá para combinar texturas em um só gradiente?

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

### A textura dificulta a leitura do texto?

Pode dificultar. Mantenha a textura mais leve atrás das palavras e deixe o texto acima de todas as camadas de textura.