# Pappersbakgrund: taktil design på skärmen

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

Papper är den äldsta bakgrunden som finns, och folk litar fortfarande på den. Så för du över dess värme, fibrer och ojämna ljus till en skärm utan att det ser ut som en skannad servett.

## The short version

- En pappersbakgrund kombinerar tre saker: en tonad grundfärg, fin fiber eller korn och något ojämnt ljus.
- Äkta papper är aldrig helvitt, så ett övertygande digitalt papper utgår från en kräm-, havre-, grå- eller kraftbrun bas.
- Subtil struktur läses som kvalitetspapper, medan kraftiga veck, kaffefläckar och trasiga kanter ser ut som clipart och åldras snabbt.
- Papperstexturer passar inbjudningar, menyer, dagböcker, varumärken inom pappersvaror, bagerier och allt som vill kännas handgjort.
- Mörkt bläck på papper behöver samma kontrast som överallt annars, så testa liten text innan du lägger på mer textur.

En **papperstextur** som bakgrund får en skärmdesign att kännas tryckt, taktil och handgjord. Den fungerar eftersom folk läser papper som omsorg: en inbjudan, ett brev, en meny där någon valt papperskvalitet. För att lyckas behöver du tre lager som samverkar: en varm eller tonad grundfärg, en fin fiber eller ett korn och ett ljus som är lite ojämnt över arket. De flesta falska papper misslyckas genom att överdriva det tredje.

## Vilken papperskänsla passar din design

Papper är inte en enda textur. Bomullspapper, kraftpapper, tidningspapper och washi känns helt olika, och vart och ett passar olika slags varumärken. Börja med att namnge papperet du efterliknar.

| Papper | Grundfärg | Textur | Passar |
| --- | --- | --- | --- |
| Bomullspapper | `#f6f1e7` | Mjuk, jämn yta | Bröllopsinbjudningar, diplom, fint brevpapper |
| Obestruket kräm | `#f3ead8` | Fin fiber, varmt | Menyer, dagböcker, bokomslag |
| Kraftpapper | `#c8a57a` | Synlig fiber, fläckar | Kaffe, bagerier, förpackningar, marknader |
| Tidningspapper | `#e9e5dc` | Grått, lite grovt | Fanzines, redaktionellt, protestaffischer |
| Återvunnet grått | `#dcd8d0` | Spräckligt | Hållbara varumärken, ateljéer |
| Washi | `#f4efe4` | Långa, genomskinliga fibrer | Te, keramik, blomsterbutiker, spa |

Sex papper och en grundfärg att utgå från. Kopiera hexkoden och lägg sedan texturen ovanpå.

- Bomull: #f6f1e7
- Krämpapper: #f3ead8
- Tidningspapper: #e9e5dc
- Kraft: #c8a57a
- Boktryckssvärta: #2b2420
- Stämpelrött: #8a2b1f

Fyra pappersbaser med varm svart svärta och ett stämpelrött, den klassiska accenten i pappersdesign. Använd det röda en gång per design.

## Så gör du en pappersbakgrund

Du kan bygga övertygande papper från grunden i vilket program som helst med brus och blandlägen. Skannat papper funkar också, men en byggd textur skalar rent till vilken storlek som helst och visar aldrig kanten på en skannerglasskiva.

1. **Fyll grundfärgen** Fyll ytan med din pappersfärg från tabellen, till exempel `#f3ead8` för obestruket kräm.
2. **Lägg på fin struktur** Lägg till ett mellangrått lager, applicera monokromt brus och sätt det på Multiplicera eller Mjukt ljus vid cirka 4 till 8 procent. Det är ytkornet som allt papper har.
3. **Lägg på fibrer** Lägg till ett andra, större brusskikt och töj eller sudda det lätt i en riktning. Med mycket låg opacitet läses det som fibrer som löper genom arket.
4. **Gör ljuset ojämnt** Lägg till en mjuk radiell gradient, aningen ljusare i ett hörn och aningen djupare i det motsatta. Äkta papper är aldrig perfekt jämnt belyst.
5. **Kontrollera svärtan** Lägg din minsta text ovanpå och titta på den i en mobil. Är något ord svårare att läsa, minska texturen före allt annat.

- Krämpapper, fönsterljus: `radial-gradient(ellipse at 20% 15%, #fbf7ef 0%, #f3ead8 50%, #e8dcc4 100%)`
- Kraft, varm lampa: `radial-gradient(ellipse at 75% 25%, #d6b78f 0%, #c8a57a 45%, #b08c60 100%)`
- Tidningspapper, platt dagsljus: `linear-gradient(170deg, #f1eee7 0%, #e9e5dc 55%, #ddd7cb 100%)`

Det ojämna ljuslagret för sig. Var och en är papperets grundfärg lyft på ett ställe och fördjupad på ett annat, före allt korn.

Den fina strukturen i steg två är samma teknik som förklaras i [kornig textur](https://gradiently.design/sv/guide/textured-background). Papper använder bara mindre av den, med en varmare bas.

## Subtilt papper slår falskt papper

Sökresultaten för pappersbakgrunder är fulla av skrynkliga ark, brända kanter och kafferingar. De ser ut som en nöjesparksversion av papper och kämpar mot varje ord du lägger på dem. En bra papperstextur är tyst nog för att folk ska känna den innan de ser den.

### Undvik

- Kraftiga veck som löper genom texten
- Kaffefläckar och brända kanter
- Trasiga ramar på ett digitalt inlägg
- Ett skannat ark med synliga skuggor
- Grå text på kräm i små storlekar

### Gör så här

- Fin struktur som precis syns i full storlek
- Fibrer med mycket låg opacitet
- Ljus som är milt ojämnt
- En varm svärtefärg, inte ren svart
- En stämpel eller accentfärg, använd en gång

## Idéer för papperstextur i riktiga designer

Papper är som bäst där ett tryckt föremål naturligt skulle finnas. Här gör det sig bäst.

En bröllopsinbjudan på en mjuk krämfärgad bakgrund med papperstextur, med namn och datum

En inbjudan i 5×7 tum vid 1500×2100. Bomullspapperets struktur och en varm svärta ger känslan av ett kort du kan hålla i.

Ett bageriinlägg i sociala medier på en varm bakgrund i kraftpappersstil med en kort rubrik

Ett bageriinlägg på kraft. Texturen säger handgjort innan någon läst ett ord.

- **Restaurangmenyer** på obestruket kräm, satta med serif. Se [design av restaurangmeny](https://gradiently.design/sv/guide/restaurant-menu-design).
- **Nyhetsbrev och dagböcker**, där papper gör långläsning lugnare.
- **Bröllops- och eventinbjudningar**; [design av bröllopsinbjudan](https://gradiently.design/sv/guide/wedding-invitation-design) har layouter.
- **Hantverks- och handgjorda varumärken**, på kraft eller återvunnet grått.
- **Citatkort**, där en enda rad på papper känns som en lapp någon skrivit.

## Typsnitt och svärta på pappersbakgrunder

Papper ändrar hur text läses. Serifer känns hemma på kräm och bomull eftersom de ritades för tryck, medan en ren sans på tidningspapper eller återvunnet grått känns modern och lite industriell. [Serif eller sans serif](https://gradiently.design/sv/guide/serif-vs-sans-serif) förklarar avvägningen. Vilket du än väljer, sätt svärtan i ett varmt nästan svart som `#2b2420` i stället för ren svart, som ser digital ut mot ett tonat ark.

Håll brödtexten i en bekväm storlek och ge den mer tyngd än du skulle ge på vitt: texturen äter lite kontrast, särskilt på mobiler. För korta rader på papper, som en enda mening på ett [citatkort](https://gradiently.design/sv/guide/quote-card-design), har du råd med en lättare vikt och mer luft. Om du väger papper mot andra ytor jämför [bakgrundstextur](https://gradiently.design/sv/guide/background-texture) de viktigaste familjerna sida vid sida.

## Papperstextur i CSS

För en webbplats lägger du ett ojämnt ljus i form av en gradient över grundfärgen och sedan ett mycket lätt brusskikt med SVG. Ett lägre `baseFrequency` än du skulle använda för filmkorn ger en mjukare, mer fibrig känsla.

```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;
}
```

Krämpapper med fönsterljus och ett mjukt fiberlager. Multiplicera håller papperet varmt; höj opaciteten lite för kraft.

Gradiently har papper och sand bland sina Marks: handgjord fiber, mjuka lasyrer och fint drivande korn som renderas live i varje storlek, med arkets lugnaste del i rörelse bakom dina ord. Sök i Marknaden på ”papper” eller filtrera på en ljus botten för att hitta en, och designa sedan med den gratis.

## FAQ

### Vilken färg har papper i hex?

Äkta papper är sällan helvitt. Obestruket kräm ligger kring `#f3ead8`, bomullspapper kring `#f6f1e7`, tidningspapper kring `#e9e5dc` och kraftpapper kring `#c8a57a`.

### Hur gör jag en papperstextur i Photoshop eller Canva?

Fyll en pappersfärg, lägg till ett monokromt brusskikt i Multiplicera eller Mjukt ljus med låg opacitet och sedan ett mjukt ojämnt ljus. I verktyg utan brus lägger du en subtil pappersbild med låg opacitet över färgen.

### Är en papperstextur bra för text?

Ja, om den är subtil. Håll strukturen fin, använd en mörk varm svärta och kontrollera liten text på en mobil innan du lägger på mer textur.

### Vilka designer passar en bakgrund av kraftpapper?

Kaffe, bagerier, marknader, förpackningar och handgjorda varumärken. Kraft läses som naturligt och praktiskt, så para det med enkel, kraftfull typografi.