# Texturas de fundo: grão, papel, tecido e vidro

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

A textura faz uma cor chapada de tela parecer uma superfície. Usada de leve, dá calor e esconde o banding; usada demais, vira ruído. Veja como achar o ponto certo.

## The short version

- Uma textura de fundo é um detalhe fino de superfície, como grão, fibra de papel, trama de tecido ou vidro fosco, aplicado sobre uma cor ou um gradiente.
- A textura funciona melhor com pouca intensidade, sentida mais do que vista, para dar calor sem competir com o conteúdo por cima.
- A escala da textura deve combinar com o tamanho de visualização: grão fino para telas pequenas e visão de perto, textura mais grossa para formatos grandes vistos de longe.
- Aplicar grão sobre um gradiente esconde o banding, porque o detalhe aleatório quebra os degraus visíveis entre os tons.
- Redes sociais e codificadores de vídeo recomprimem as imagens, o que pode borrar texturas muito finas, então confira a textura depois do upload.

Uma **textura de fundo** é um detalhe fino de superfície aplicado sobre uma cor ou um gradiente: o pontilhado do grão de filme, as fibras do papel, a trama do linho, a geada do vidro. É o que faz um fundo parecer um material, e não pixels. A regra que mais importa é a intensidade. Uma textura que você sente, mas não nota, deixa o design mais acolhedor e com cara de mais caro; uma textura que você nota primeiro vira o assunto e briga com tudo o que está por cima.

Um post em retrato com o título Manhãs lentas, bom café sobre um gradiente de textura suave

Um gradiente texturizado num post em retrato: a superfície parece um material, e as palavras continuam mandando.

## Tipos de textura de fundo

| Textura | Parece | Melhor para |
| --- | --- | --- |
| Grão ou ruído | Filme, impressão, acabamento fosco | Gradientes, fundos escuros, qualquer coisa que faz banding |
| Papel | Impresso, artesanal, editorial | Frases, diários, convites, marcas calmas |
| Tecido e linho | Macio, tecido, tátil | Moda, interiores, hospitalidade |
| Vidro fosco | Moderno, em camadas, luminoso | Interfaces, cards sobre cor, marcas de tecnologia |
| Meio-tom e pontos riso | Impressão retrô, zines, pôsteres | Posts divertidos e editoriais para redes sociais |
| Pedra e concreto | Sólido, arquitetônico, silencioso | Luxo, arquitetura, fotografia de produto |

Famílias comuns de textura e as associações que trazem. Escolha uma por design.

Cada textura carrega uma associação. O grão diz filme e impressão, o papel diz artesanal, o vidro diz interface. Escolha a que combina com o que a sua marca deve transmitir e use em todo lugar; papel num post e vidro no seguinte desfaz o efeito. Se você ainda não definiu essa sensação, a [personalidade da marca](https://gradiently.design/pt-br/guide/brand-personality) tem um jeito simples de decidir.

## Escala: combinando a textura com o tamanho de visualização

A textura se lê de forma diferente em tamanhos diferentes. Uma tela de celular vista de perto mostra cada pontinho, então um grão fino basta. Um pôster do outro lado da sala ou um slide num projetor pedem uma textura mais grossa para aparecer. E uma textura que fica certa num post de 1080×1350 pode sumir quando a plataforma o reduz a uma miniatura, ou virar manchas quando é recomprimida.

- Story 1080×1920: fina: 1080 × 1920
- Post 1080×1350: fina: 1080 × 1350
- Slide 1920×1080: média: 1920 × 1080
- Impressão A3 3508×4961: mais grossa: 3508 × 4961

A mesma textura precisa de uma escala diferente para cada formato e distância de visualização.

Na impressão, o grão em geral sobrevive bem e até ajuda gradientes a saírem limpos; o guia de [impressão de gradientes](https://gradiently.design/pt-br/guide/print-gradients) trata dos detalhes.

## Textura sobre gradientes

A combinação mais útil é textura sobre um gradiente. O grão quebra os degraus visíveis que aparecem nas misturas lisas, o chamado banding, e faz um gradiente digital parecer impresso. O método usual é colocar a textura numa camada separada acima da cor e misturá-la com um modo como Sobreposição ou Luz suave, com baixa opacidade, para que ela sombreie a cor em vez de cobri-la.

1. **Comece pela cor** Acerte primeiro o gradiente. A textura não salva cores que não combinam.
2. **Acrescente uma camada de textura** Coloque-a acima do gradiente. Use uma textura cinza ou neutra para que ela não tinja a cor.
3. **Misture** Defina a camada como Sobreposição ou Luz suave. A Luz suave é mais delicada e mantém as cores limpas.
4. **Diminua a intensidade** Reduza a opacidade até que você só perceba a textura quando procura por ela, muitas vezes bem abaixo da metade.
5. **Confira a área mais escura** O banding se esconde em fades escuros e lentos. Garanta que a textura dissolveu qualquer degrau ali.

Na web, a mesma abordagem leva poucas linhas de código; veja [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture). Para entender por que o grão em especial fica tão bom em gradientes, leia [gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients).

## Textura e legibilidade

### Evite

- Textura forte bem atrás de texto pequeno
- Padrões de alto contraste, como uma trama de linho marcada, sob o texto corrido
- Duas ou três texturas diferentes num mesmo design
- Textura tão fina que vira borrão depois do upload

### Faça

- Textura discreta, ou uma área mais calma onde as palavras ficam
- Textura de baixo contraste em tons próximos de uma cor
- Uma família de textura em todos os formatos
- Confira a versão enviada, não só a exportação

A textura acrescenta ruído visual perto das letras, e o texto pequeno sofre primeiro. Mantenha a textura discreta onde o texto fica, ou dê às palavras uma região calma e uniforme do fundo. O guia de [texto sobre fundos carregados](https://gradiently.design/pt-br/guide/type-on-busy-backgrounds) trata das técnicas em detalhe.

Um post quadrado de frase em que o fundo texturizado passa sem mudança atrás do texto

Textura e cor passando direto pelas palavras…

O mesmo post quadrado de frase com o fundo mais calmo e de maior contraste atrás do texto

…e o mesmo fundo abrindo um espaço calmo atrás delas.

## Textura que se mantém coerente

É fácil perder a textura entre ferramentas: uma camada de grão num arquivo, uma imagem de papel em outro, uma intensidade diferente em cada exportação. No Gradiently, a textura faz parte do próprio fundo. Um Mark empilha até três materiais com grão e luz, então a mesma superfície é renderizada atrás de todo design em todo tamanho, e a região mais calma dele se move para trás das palavras.

Um Mark: cor, material e grão renderizados juntos, idênticos em todos os formatos.

## FAQ

### O que é uma textura de fundo?

Um detalhe fino de superfície, como grão, fibra de papel, trama de tecido ou vidro fosco, aplicado sobre uma cor ou um gradiente para parecer um material físico.

### Qual deve ser a intensidade de uma textura de fundo?

Discreta. Você deve notá-la só quando procura por ela. Se a textura é a primeira coisa que você vê, reduza a opacidade.

### Acrescentar textura resolve o banding em gradientes?

O grão em geral resolve. O detalhe fino e aleatório quebra os degraus visíveis entre os tons, e a mistura parece lisa.

### Que modo de mesclagem devo usar para a textura?

Luz suave para um efeito delicado que mantém as cores limpas, ou Sobreposição para um mais forte. Use uma textura cinza neutra para que ela não tinja a cor.

### Por que a minha textura fica manchada nas redes sociais?

As plataformas recomprimem os uploads, o que pode borrar texturas muito finas. Use uma textura um pouco mais grossa e confira o resultado depois de enviado.