# Papiertextur als Hintergrund: haptisches Design auf dem Bildschirm

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

Papier ist der älteste Hintergrund überhaupt, und Menschen vertrauen ihm noch immer. So bringst du seine Wärme, seine Fasern und sein ungleichmäßiges Licht auf den Bildschirm, ohne dass es wie eine eingescannte Serviette aussieht.

## The short version

- Ein Hintergrund mit Papiertextur verbindet drei Dinge: eine getönte Grundfarbe, feine Fasern oder Körnung und leicht ungleichmäßiges Licht.
- Echtes Papier ist nie reinweiß, deshalb beginnt überzeugendes digitales Papier mit einer Basis in Creme, Hafer, Grau oder Kraftbraun.
- Eine feine Oberflächenstruktur wirkt wie hochwertiges Papier; starke Knicke, Kaffeeflecken und gerissene Ränder wirken wie Clipart und veralten schnell.
- Papiertexturen passen zu Einladungen, Speisekarten, Journalen, Papeterie-Marken, Bäckereien und allem, was handgemacht wirken soll.
- Dunkle Schrift auf Papier braucht denselben Kontrast wie überall sonst, also teste kleinen Text, bevor du mehr Textur hinzufügst.

Eine **Papiertextur** als Hintergrund lässt ein Bildschirmdesign gedruckt, haptisch und handgemacht wirken. Das funktioniert, weil Menschen Papier als Sorgfalt lesen: eine Einladung, ein Brief, eine Speisekarte, für die jemand ein Papier ausgesucht hat. Damit es gelingt, brauchst du drei Ebenen, die zusammenspielen: eine warme oder getönte Grundfarbe, feine Fasern oder Körnung und Licht, das über das Blatt leicht ungleichmäßig fällt. Die meisten falschen Papiere scheitern daran, dass sie die dritte Ebene übertreiben.

## Welcher Papierlook zu deinem Design passt

Papier ist nicht eine Textur. Hadernpapier, Kraftpapier, Zeitungspapier und Washi fühlen sich völlig verschieden an, und jedes passt zu einer anderen Art von Marke. Benenn zuerst das Papier, das du nachahmst.

| Papier | Grundfarbe | Textur | Passt zu |
| --- | --- | --- | --- |
| Hadernpapier | `#f6f1e7` | Weiche, gleichmäßige Struktur | Hochzeitseinladungen, Urkunden, edle Papeterie |
| Ungestrichenes Creme | `#f3ead8` | Feine Fasern, warm | Speisekarten, Journale, Buchcover |
| Kraftpapier | `#c8a57a` | Sichtbare Fasern, Sprenkel | Kaffee, Bäckereien, Verpackung, Märkte |
| Zeitungspapier | `#e9e5dc` | Grau, leicht rau | Zines, Editorial, Protestplakate |
| Graues Recyclingpapier | `#dcd8d0` | Gesprenkelt | Nachhaltige Marken, Studios |
| Washi | `#f4efe4` | Lange, durchscheinende Fasern | Tee, Keramik, Floristen, Spas |

Sechs Papiere und eine Grundfarbe zum Starten. Kopier den Hex-Wert und leg die Textur darüber.

- Baumwolle: #f6f1e7
- Cremepapier: #f3ead8
- Zeitungspapier: #e9e5dc
- Kraft: #c8a57a
- Buchdruckfarbe: #2b2420
- Stempelrot: #8a2b1f

Vier Papierbasen mit einem warmen Schwarz und einem Stempelrot, dem klassischen Akzent für Papierdesigns. Nutz das Rot einmal pro Design.

## So erstellst du einen Hintergrund mit Papiertextur

Überzeugendes Papier kannst du in jedem Programm mit Rauschen und Füllmethoden von Grund auf bauen. Gescanntes Papier geht auch, aber eine gebaute Textur skaliert sauber auf jede Größe und zeigt nie den Rand eines Scannerglases.

1. **Die Basis füllen** Füll die Fläche mit deiner Papierfarbe aus der Tabelle, zum Beispiel `#f3ead8` für ungestrichenes Creme.
2. **Feine Struktur hinzufügen** Leg eine mittelgraue Ebene an, wende monochromes Rauschen an und stell sie auf Multiplizieren oder Weiches Licht mit etwa 4 bis 8 Prozent. Das ist die Oberflächenkörnung, die jedes Papier hat.
3. **Fasern hinzufügen** Leg eine zweite, gröbere Rauschebene an und zieh oder verwisch sie leicht in eine Richtung. Bei sehr geringer Deckkraft liest sie sich wie Fasern, die durch das Blatt laufen.
4. **Das Licht ungleichmäßig machen** Füg einen weichen radialen Verlauf hinzu, in einer Ecke etwas heller und in der gegenüberliegenden etwas tiefer. Echtes Papier ist nie ganz gleichmäßig beleuchtet.
5. **Die Schrift prüfen** Setz deinen kleinsten Text darauf und sieh ihn dir auf einem Smartphone an. Ist irgendein Wort schwerer zu lesen, reduziere zuerst die Textur.

- Cremepapier im Fensterlicht: `radial-gradient(ellipse at 20% 15%, #fbf7ef 0%, #f3ead8 50%, #e8dcc4 100%)`
- Kraft unter warmer Lampe: `radial-gradient(ellipse at 75% 25%, #d6b78f 0%, #c8a57a 45%, #b08c60 100%)`
- Zeitungspapier im flachen Tageslicht: `linear-gradient(170deg, #f1eee7 0%, #e9e5dc 55%, #ddd7cb 100%)`

Die ungleichmäßige Lichtebene für sich. Jede ist die Grundfarbe des Papiers, an einer Stelle aufgehellt und an einer anderen vertieft, noch ohne Körnung.

Die feine Struktur aus Schritt zwei ist dieselbe Technik, die in [Körnungstextur](https://gradiently.design/de/guide/textured-background) erklärt wird. Papier nutzt einfach weniger davon, auf einer wärmeren Basis.

## Dezentes Papier schlägt falsches Papier

Suchergebnisse für Papierhintergründe sind voller zerknüllter Blätter, verbrannter Ränder und Kaffeeringe. Sie wirken wie eine Freizeitpark-Version von Papier und kämpfen gegen jedes Wort, das du daraufsetzt. Eine gute Papiertextur ist so leise, dass man sie spürt, bevor man sie sieht.

### Vermeiden

- Starke Knicke, die durch den Text laufen
- Kaffeeflecken und verbrannte Ränder
- Gerissene Ränder an einem digitalen Post
- Ein gescanntes Blatt mit sichtbaren Schatten
- Grauer Text auf Creme in kleinen Größen

### Machen

- Feine Struktur, in voller Größe gerade sichtbar
- Fasern mit sehr geringer Deckkraft
- Licht, das sanft ungleichmäßig ist
- Eine warme Schriftfarbe, kein reines Schwarz
- Ein Stempel oder eine Akzentfarbe, einmal genutzt

## Ideen für Papiertexturen in echten Designs

Papier ist dort am stärksten, wo es ganz natürlich ein gedrucktes Objekt gäbe. An diesen Stellen lohnt es sich.

Ein Hochzeitseinladungsdesign auf einem sanften cremefarbenen Papiertexturhintergrund mit Namen und Datum

Eine Einladung im Format 5×7 in mit 1500×2100. Die Struktur von Hadernpapier und eine warme Schrift fühlen sich wie eine Karte zum Anfassen an.

Ein Bäckerei-Post im Stil von warmem Kraftpapier mit einer kurzen Headline

Ein Bäckerei-Post auf Kraftpapier. Die Textur sagt „handgemacht“, bevor jemand ein Wort liest.

- **Speisekarten** auf ungestrichenem Creme, in einer Serifenschrift gesetzt. Siehe [Speisekarten gestalten](https://gradiently.design/de/guide/restaurant-menu-design).
- **Newsletter und Journale**, bei denen Papier langes Lesen ruhiger wirken lässt.
- **Hochzeits- und Eventeinladungen**; [Hochzeitseinladungen gestalten](https://gradiently.design/de/guide/wedding-invitation-design) zeigt Layouts.
- **Handwerks- und Manufakturmarken**, auf Kraftpapier oder grauem Recyclingpapier.
- **Zitatkarten**, bei denen eine einzelne Zeile auf Papier wie eine handgeschriebene Notiz wirkt.

## Schrift und Farbe auf Papierhintergründen

Papier verändert, wie Schrift wirkt. Serifenschriften fühlen sich auf Creme und Baumwolle zu Hause, weil sie für den Druck gezeichnet wurden; eine klare Groteske auf Zeitungs- oder Recyclingpapier wirkt modern und leicht industriell. [Serif oder Sans Serif](https://gradiently.design/de/guide/serif-vs-sans-serif) erklärt die Abwägung. Was du auch wählst, setz die Schrift in einem warmen Fast-Schwarz wie `#2b2420` statt in reinem Schwarz, das auf einem getönten Blatt digital wirkt.

Halte Fließtext in einer angenehmen Größe und gib ihm mehr Gewicht als auf Weiß: Textur schluckt etwas Kontrast, besonders auf Smartphones. Für kurze Zeilen auf Papier, etwa einen einzigen Satz auf einer [Zitatkarte](https://gradiently.design/de/guide/quote-card-design), kannst du dir einen leichteren Schnitt und mehr Raum leisten. Wenn du Papier gegen andere Oberflächen abwägst, vergleicht [Hintergrundtextur](https://gradiently.design/de/guide/background-texture) die wichtigsten Familien nebeneinander.

## Papiertextur in CSS

Für eine Website legst du einen ungleichmäßigen Lichtverlauf über die Grundfarbe und fügst dann mit SVG eine sehr leichte Rauschebene hinzu. Eine niedrigere `baseFrequency` als für Filmkorn ergibt ein weicheres, faserigeres Gefühl.

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

Cremepapier mit Fensterlicht und einer weichen Faserebene. Multiply hält das Papier warm; für Kraftpapier erhöhst du die Deckkraft etwas.

Unter den Marks von Gradiently gibt es Papier- und Sandmaterialien: handgemachte Fasern, weiche Lasuren und feine, treibende Körnung, live in jeder Größe gerendert, wobei der ruhigste Teil des Blatts hinter deine Wörter wandert. Such im Markt nach „Papier“ oder filtere nach einem hellen Grund, um einen zu finden, und gestalte kostenlos damit.

## FAQ

### Welche Farbe hat Papier in Hex?

Echtes Papier ist selten reinweiß. Ungestrichenes Creme liegt bei etwa `#f3ead8`, Hadernpapier bei `#f6f1e7`, Zeitungspapier bei `#e9e5dc` und Kraftpapier bei `#c8a57a`.

### Wie erstelle ich eine Papiertextur in Photoshop oder Canva?

Füll eine Papierfarbe, füg eine monochrome Rauschebene mit Multiplizieren oder Weichem Licht bei geringer Deckkraft hinzu und dann ein weiches, ungleichmäßiges Licht. In Tools ohne Rauschen legst du ein dezentes Papierbild mit geringer Deckkraft über die Farbe.

### Eignet sich eine Papiertextur für Text?

Ja, wenn sie dezent ist. Halte die Struktur fein, nutze eine dunkle, warme Schriftfarbe und prüf kleinen Text auf dem Smartphone, bevor du mehr Textur hinzufügst.

### Welche Designs passen zu einem Kraftpapier-Hintergrund?

Kaffee, Bäckereien, Märkte, Verpackung und Manufakturmarken. Kraftpapier wirkt natürlich und praktisch, kombinier es also mit einfacher, kräftiger Schrift.