# Körnung: Filmkorn für digitale Designs

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

Etwas Körnung ist der schnellste Weg, ein digitales Design wie ein gemachtes Objekt wirken zu lassen. Zu viel, und es sieht aus wie ein kaputter Bildschirm. So beurteilst du Menge, Größe und Farbe.

## The short version

- Körnung ist ein feines, zufälliges Gesprenkel über einem Design, damit flache digitale Farbe wie Film, Papier oder Druck wirkt.
- Körnung hilft auf drei Arten: Sie verbirgt Banding in weichen Verläufen, verbindet Fotos und flache Grafiken und gibt klaren Formen eine physische Oberfläche.
- Bei den meisten Bildschirmdesigns sollte Körnung in voller Größe gerade sichtbar und auf Armlänge unsichtbar sein; fällt sie zuerst auf, ist es zu viel.
- Monochrome Körnung ist der sichere Standard; farbige Körnung sieht eher nach echtem Film aus, kann aber eine Palette verschieben.
- Starke JPEG-Kompression glättet Körnung weg, exportiere körnige Standbilder also als PNG oder hochwertiges JPEG und gib körnigem Video eine großzügige Bitrate.

**Körnung** ist eine feine Schicht zufälligen Rauschens über einem Design, damit vollkommen flache digitale Farbe aussieht, als wäre sie gedruckt, auf Film fotografiert oder in Papier gepresst. Sie ist absichtlich dezent: In der richtigen Menge benennt sie niemand, man spürt nur, dass das Bild eine Oberfläche hat. Es kommt auf vier Einstellungen an: Menge, Größe, Farbe und Mischmodus.

## Warum Körnung digitale Designs besser aussehen lässt

Bildschirme zeigen Farbe, die kein physisches Material zeigen kann: vollkommen gleichmäßig, vollkommen sauber. Genau diese Sauberkeit lässt viele digitale Designs billig oder unfertig wirken. Körnung bringt ein wenig von der Unregelmäßigkeit zurück, die jede echte Oberfläche hat. Außerdem erfüllt sie drei praktische Aufgaben.

- **Sie verbirgt Banding.** Weiche Verläufe zerfallen auf 8-Bit-Bildschirmen in sichtbare Streifen. Zufälliges Rauschen bricht diese Kanten auf, sodass das Auge einen durchgehenden Übergang liest. [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding) erklärt die Ursache.
- **Sie verbindet gemischte Elemente.** Ein Foto hat natürliche Körnung, eine flache Form keine. Eine Kornschicht über beidem lässt sie wirken, als gehörten sie zum selben Bild.
- **Sie gibt eine Oberfläche.** Flache Farbe wirkt wie ein Bildschirm; Farbe mit Körnung wirkt wie ein Material. Deshalb steht Körnung im Zentrum der meisten Entscheidungen für [Hintergrundtexturen](https://gradiently.design/de/guide/background-texture).

Ein Post einer Kaffeerösterei mit warmem, texturiertem Hintergrund und kurzer Überschrift

Ein warmer, sanft texturierter Hintergrund wirkt wie ein handwerkliches Objekt, passend zu einem handgemachten Produkt.

Ein Post mit einer großen Zahl auf einem sanft körnigen farbigen Hintergrund

Dasselbe Gefühl trägt eine schlichte Tatsache. Körnung bewahrt eine große Zahl davor, wie eine Tabelle auszusehen.

## Wie viel Körnung du hinzufügst

Der ehrliche Test ist der Abstand. Sieh dir das Design bei 100 Prozent an: Die Körnung sollte gerade sichtbar sein. Dann auf dem Handy auf Armlänge: Dort sollte sie es nicht sein. Ist Körnung das Erste, was jemandem auffällt, halbiere sie. Verschiedene Aufgaben vertragen verschiedene Mengen.

| Einsatz | Menge | Korngröße | Warum |
| --- | --- | --- | --- |
| Website-Hintergrund | Sehr leicht, 3 bis 6 % Deckkraft | Fein | Große Flächen und langes Betrachten machen Körnung auffällig |
| Social Post | Leicht, 6 bis 12 % | Fein bis mittel | Übersteht erneute Kompression und Handybildschirme |
| Plakat oder Flyer | Mittel, 10 bis 18 % | Mittel | Aus der Entfernung betrachtet wirkt Körnung wie Druck |
| Retro- oder Filmlook | Stark, 18 bis 30 % | Mittel bis grob | Die Körnung ist Teil des Stils |
| Video-Loop | Leicht, animiert | Fein | Statische Körnung auf bewegtem Video sieht aus wie Schmutz auf der Linse |

Ausgangswerte als Deckkraft einer Rauschebene im Modus Ineinanderkopieren oder Weiches Licht. Stimme nach Auge ab; Bildschirme und Farben unterscheiden sich.

> **Dunkle Designs brauchen weniger** Körnung zeigt sich auf dunklen und mittleren Tönen stärker als auf fast Weiß. Auf einem dunklen Hintergrund beginnst du mit der Hälfte der Menge, die du auf einem hellen nehmen würdest.

## Monochrome oder farbige Körnung

Echtes Filmkorn ist farbig: winzige rote, grüne und blaue Punkte, die sich von Bild zu Bild ändern. Digitale monochrome Körnung ist nur hell und dunkel. Beide haben ihren Platz.

### Monochrome Körnung

- Hält deine Palette genau wie gewählt
- Wirkt wie Druck, Papier oder Risografie
- Sicher für Markenfarben und Logos
- Der richtige Standard für die meisten Arbeiten

### Farbige Körnung

- Sieht aus wie analoger Film
- Bringt Leben in Fotos und Hauttöne
- Kann eine flache Markenfarbe leicht verschieben
- Am besten für fotografische, nostalgische Stile

Die Korngröße zählt genauso viel wie die Farbe. Feines Korn wirkt hochwertig und modern. Grobes Korn wirkt handgemacht, rau und laut. Pass die Körnung an die Ausgabe an: Ein Post mit 1080×1350 braucht feineres Korn als ein A3-Plakat mit 3508×4961, weil das Plakat aus größerer Entfernung gesehen wird.

## So fügst du Körnung in jedem Designtool hinzu

1. **Leg eine Rauschebene an** Füll eine neue Ebene mit mittlerem Grau (`#808080`) und füge Rauschen hinzu. In den meisten Programmen heißt der Filter Rauschen hinzufügen, Rauschen oder Körnung. Wähle Gaußsche Verteilung und monochromatisch für einen sauberen Start.
2. **Stell den Mischmodus ein** Stell die Ebene auf **Ineinanderkopieren** oder **Weiches Licht**. Das Grau verschwindet, nur das Gesprenkel bleibt und hellt die Farben darunter auf oder dunkelt sie ab.
3. **Senk die Deckkraft** Bring sie auf die Menge aus der Tabelle oben. Prüfe bei 100 Prozent Zoom und noch einmal auf dem Handy.
4. **Lass sie oben** Körnung gehört über Hintergrund und Fotos. Lass kleine Schrift und Logos über der Körnung, wenn sie scharf bleiben sollen, oder darunter für ein gedrucktes Gefühl.
5. **Exportiere sorgfältig** Exportiere PNG oder hochwertiges JPEG. Starke Kompression verschmiert Körnung zu Flecken, das sieht schlimmer aus als gar keine Körnung.

Wenn du Körnung gezielt einem Farbverlauf hinzufügst, hat [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients) die Einstellungen dafür, und [Rausch-Hintergründe](https://gradiently.design/de/guide/noise-background) hat fertige Rezepte.

## Körnung im Web

Auf einer Website brauchst du keine Bilddatei für Körnung. Ein Inline-SVG mit dem Filter `feTurbulence` zeichnet Rauschen im Browser in jeder Größe, es bleibt also auf jedem Bildschirm scharf und wiegt fast nichts.

```html
<svg class="grain" aria-hidden="true">
  <filter id="grain">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#grain)" />
</svg>

<style>
  .grain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.06;
  }
</style>
```

Eine fixierte Kornschicht über einer ganzen Seite. Erhöhe `baseFrequency` für feineres Korn, senke es für gröberes. Entferne die Farbmatrix für farbiges Rauschen.

Halte die Deckkraft niedrig: Eine ganze Seite Körnung ist eine große Fläche, und 6 Prozent reichen oft. Die [MDN-Referenz zu feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) listet jede Einstellung auf.

## Körnung in Video und Animation

Auf bewegtem Bild sollte sich auch die Körnung bewegen. Eine einzelne stillstehende Kornschicht über Video sieht aus wie eine schmutzige Linse. Nutze animierte Körnung, die sich in jedem Frame ändert, halte sie fein und exportiere mit großzügiger Bitrate, denn Videokompression behandelt Körnung als Detail, das weg kann. Für Loops lies [nahtlose Video-Loops](https://gradiently.design/de/guide/seamless-loop-video), bevor du Textur hinzufügst.

Gradiently baut Körnung als Teil des Rezepts in jeden Mark ein, neben Farbe, Material, Licht und Bewegung, sodass die Textur in jeder Größe, in der du gestaltest, frisch rendert, statt aus einem Bild gestreckt zu werden. Wenn du einen Hintergrund willst, der seine Oberfläche schon hat, stöbere im Markt und gestalte mit einem beliebigen ungesicherten Mark.

## FAQ

### Was ist Körnung im Design?

Ein feines, zufälliges Gesprenkel aus Hell und Dunkel über einem Design, damit flache digitale Farbe wie Film, Papier oder Druck aussieht.

### Wie viel Körnung sollte ich einem Bild hinzufügen?

So viel, dass man sie bei 100 Prozent Zoom sieht und auf Armlänge nicht. Für Social Posts ist eine Rauschebene mit etwa 6 bis 12 Prozent Deckkraft im Modus Ineinanderkopieren ein guter Start.

### Behebt Körnung Banding in Farbverläufen?

Meistens ja. Zufälliges Rauschen bricht die harten Kanten zwischen den Streifen auf, sodass das Auge einen weichen Übergang liest.

### Warum verschwindet meine Körnung nach dem Hochladen?

Plattformen komprimieren Bilder neu und behandeln feine Körnung als verzichtbares Detail. Nimm etwas mehr Körnung, exportiere PNG oder hochwertiges JPEG und lade in der exakten Größe der Plattform hoch.

### Sollte Filmkorn farbig oder schwarz-weiß sein?

Monochrome Körnung hält Markenfarben exakt und passt zu den meisten Arbeiten. Farbige Körnung sieht eher nach analogem Film aus und passt zu fotografischen Stilen.