# Fundo com textura de papel: design tátil na tela

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

O papel é o fundo mais antigo que existe, e as pessoas ainda confiam nele. Veja como trazer seu calor, suas fibras e sua luz irregular para a tela sem parecer um guardanapo escaneado.

## The short version

- Um fundo com textura de papel combina três coisas: uma cor de base tingida, fibra ou grão fino e uma luz levemente irregular.
- O papel de verdade nunca é branco puro, então um papel digital convincente parte de uma base creme, aveia, cinza ou marrom kraft.
- Um grão sutil lembra papel de qualidade; vincos fortes, manchas de café e bordas rasgadas parecem clip art e envelhecem rápido.
- Texturas de papel combinam com convites, cardápios, diários, marcas de papelaria, padarias e tudo que quer parecer feito à mão.
- Tinta escura sobre papel precisa do mesmo contraste de sempre, então teste o texto pequeno antes de somar mais textura.

Um fundo com **textura de papel** faz um design de tela parecer impresso, tátil e feito à mão. Funciona porque as pessoas leem o papel como cuidado: um convite, uma carta, um cardápio para o qual alguém escolheu um papel. Para acertar, três camadas precisam trabalhar juntas: uma cor de base quente ou tingida, uma fibra ou grão fino e uma luz um pouco irregular ao longo da folha. A maior parte do papel falso falha por exagerar na terceira.

## Qual aspecto de papel combina com o seu design

Papel não é uma textura só. Algodão, kraft, papel-jornal e washi têm sensações completamente diferentes, e cada um combina com um tipo de marca. Comece nomeando o papel que você quer imitar.

| Papel | Cor de base | Textura | Combina com |
| --- | --- | --- | --- |
| Algodão | `#f6f1e7` | Grão suave e uniforme | Convites de casamento, certificados, papelaria fina |
| Creme não revestido | `#f3ead8` | Fibra fina, quente | Cardápios, diários, capas de livro |
| Kraft | `#c8a57a` | Fibra visível, pontinhos | Café, padarias, embalagens, feiras |
| Papel-jornal | `#e9e5dc` | Cinza, levemente áspero | Zines, editorial, cartazes de protesto |
| Cinza reciclado | `#dcd8d0` | Manchado de pontinhos | Marcas sustentáveis, estúdios |
| Washi | `#f4efe4` | Fibras longas e translúcidas | Chá, cerâmica, floriculturas, spas |

Seis papéis e uma cor de base para começar. Copie o hex e depois adicione a textura por cima.

- Algodão: #f6f1e7
- Papel creme: #f3ead8
- Papel-jornal: #e9e5dc
- Kraft: #c8a57a
- Tinta tipográfica: #2b2420
- Vermelho de carimbo: #8a2b1f

Quatro bases de papel com um preto quente de tinta e um vermelho de carimbo, o acento clássico dos designs em papel. Use o vermelho uma vez por design.

## Como fazer um fundo com textura de papel

Dá para criar um papel convincente do zero em qualquer editor com ruído e modos de mesclagem. Papel escaneado também funciona, mas uma textura criada escala bem para qualquer tamanho e nunca mostra a borda do scanner.

1. **Preencha a base** Preencha o canvas com a cor do papel da tabela, por exemplo `#f3ead8` para o creme não revestido.
2. **Adicione grão fino** Crie uma camada cinza médio, aplique ruído monocromático e defina como Multiplicar ou Luz suave em cerca de 4 a 8%. É o grão de superfície que todo papel tem.
3. **Adicione fibra** Crie uma segunda camada de ruído, maior, e estique ou desfoque levemente em uma direção. Em opacidade bem baixa, ela parece fibras correndo pela folha.
4. **Deixe a luz irregular** Adicione um esmaecido radial suave, um toque mais claro em um canto e um toque mais escuro no oposto. O papel de verdade nunca é iluminado de forma perfeitamente uniforme.
5. **Confira a tinta** Coloque seu menor texto por cima e veja no celular. Se alguma palavra ficar mais difícil de ler, reduza a textura antes de qualquer outra coisa.

- Papel creme, luz de janela: `radial-gradient(ellipse at 20% 15%, #fbf7ef 0%, #f3ead8 50%, #e8dcc4 100%)`
- Kraft, luz quente de abajur: `radial-gradient(ellipse at 75% 25%, #d6b78f 0%, #c8a57a 45%, #b08c60 100%)`
- Papel-jornal, luz do dia: `linear-gradient(170deg, #f1eee7 0%, #e9e5dc 55%, #ddd7cb 100%)`

A camada de luz irregular sozinha. Cada uma é a cor de base do papel clareada em um ponto e escurecida em outro, antes de qualquer grão.

O grão fino do passo dois é a mesma técnica explicada em [textura de grão](https://gradiently.design/pt-br/guide/textured-background). O papel só usa menos dela, com uma base mais quente.

## Papel sutil vence papel falso

Os resultados de busca por fundos de papel estão cheios de folhas amassadas, bordas queimadas e marcas de xícara de café. Parecem uma versão de parque temático do papel e brigam com cada palavra colocada em cima. Uma boa textura de papel é discreta o bastante para ser sentida antes de ser vista.

### Evite

- Vincos fortes atravessando o texto
- Manchas de café e bordas queimadas
- Bordas rasgadas em um post digital
- Uma folha escaneada com sombras visíveis
- Texto cinza sobre creme em tamanho pequeno

### Faça

- Grão fino, só visível em tamanho real
- Fibras em opacidade bem baixa
- Luz suavemente irregular
- Uma tinta de cor quente, não preto puro
- Um carimbo ou cor de acento, usado uma vez

## Ideias de textura de papel para designs reais

O papel rende mais onde um objeto impresso existiria naturalmente. Estes são os lugares onde ele se paga.

Design de convite de casamento sobre um fundo texturizado de papel creme suave, com nomes e uma data

Um convite de 5×7 pol em 1500×2100. O grão de algodão e uma tinta quente parecem um cartão que você pode segurar.

Post de rede social de uma padaria sobre um fundo quente no estilo papel kraft, com um título curto

Um post de padaria sobre kraft. A textura diz feito à mão antes de alguém ler uma palavra.

- **Cardápios de restaurante** em creme não revestido, compostos com serifa. Veja [design de cardápio de restaurante](https://gradiently.design/pt-br/guide/restaurant-menu-design).
- **Newsletters e diários**, onde o papel deixa a leitura longa mais calma.
- **Convites de casamento e de eventos**; [design de convite de casamento](https://gradiently.design/pt-br/guide/wedding-invitation-design) tem layouts.
- **Marcas artesanais e feitas à mão**, em kraft ou cinza reciclado.
- **Cards de citação**, onde uma única frase no papel parece um bilhete escrito por alguém.

## Tipografia e tinta em fundos de papel

O papel muda a forma como a tipografia é lida. Fontes com serifa ficam em casa no creme e no algodão, porque foram desenhadas para impressão; uma sem serifa limpa sobre papel-jornal ou cinza reciclado parece moderna e levemente industrial. [Serifa vs sem serifa](https://gradiently.design/pt-br/guide/serif-vs-sans-serif) explica a troca. Seja qual for a sua escolha, use uma tinta quase preta e quente, como `#2b2420`, em vez de preto puro, que parece digital sobre uma folha tingida.

Mantenha o texto corrido em um tamanho confortável e dê a ele mais peso do que daria no branco: a textura consome um pouco de contraste, principalmente no celular. Para linhas curtas no papel, como uma única frase em um [card de citação](https://gradiently.design/pt-br/guide/quote-card-design), dá para usar um peso mais leve e mais espaço. Se você está pesando o papel contra outras superfícies, [textura de fundo](https://gradiently.design/pt-br/guide/background-texture) compara as principais famílias lado a lado.

## Textura de papel em CSS

Para um site, coloque um degradê de luz irregular sobre a cor de base e depois uma camada de ruído bem leve com SVG. Um `baseFrequency` mais baixo do que o usado em grão de filme dá uma sensação mais suave e fibrosa.

```css
.paper {
  position: relative;
  isolation: isolate;
  color: #2b2420;
  background:
    radial-gradient(ellipse at 20% 15%, #fbf7ef 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, #e8dcc4 0%, transparent 60%),
    #f3ead8;
}

.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.08;
}
```

Papel creme com luz de janela e uma camada suave de fibra. O Multiply mantém o papel quente; aumente um pouco a opacidade para o kraft.

O Gradiently tem materiais de papel e areia entre seus Marks: fibra artesanal, lavados suaves e grão fino à deriva, renderizados ao vivo em qualquer tamanho, com a parte mais calma da folha se movendo atrás das suas palavras. Pesquise “papel” no Mercado ou filtre por um fundo claro para achar um, e depois crie com ele de graça.

## FAQ

### Qual é a cor do papel em hex?

O papel de verdade raramente é branco puro. O creme não revestido fica em torno de `#f3ead8`, o algodão em torno de `#f6f1e7`, o papel-jornal em torno de `#e9e5dc` e o kraft em torno de `#c8a57a`.

### Como faço uma textura de papel no Photoshop ou no Canva?

Preencha com uma cor de papel, adicione uma camada de ruído monocromático em Multiplicar ou Luz suave com baixa opacidade e depois uma luz suave e irregular. Em ferramentas sem ruído, coloque uma imagem sutil de papel em baixa opacidade sobre a cor.

### Uma textura de papel funciona bem com texto?

Sim, se for sutil. Mantenha o grão fino, use uma tinta escura e quente e confira o texto pequeno no celular antes de somar mais textura.

### Que designs combinam com um fundo de papel kraft?

Café, padarias, feiras, embalagens e marcas artesanais. O kraft transmite algo natural e prático, então combine com tipografia simples e forte.