# Markentextur: die Materialqualität, die einen Look zu deinem macht

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

Farbe und Schrift lassen sich leicht abgreifen. Textur, also Körnung, Glanz und Licht auf einer Oberfläche, ist viel schwerer zu kopieren und sagt erstaunlich viel über eine Marke.

## The short version

- Markentextur ist die Materialqualität der Oberflächen einer Marke, etwa Körnung, Papierstruktur, glasiger Glanz oder weiches Licht.
- Textur verändert, wie sich eine Farbe anfühlt: Dasselbe Violett wirkt auf Körnung wie Film, auf Glas wie Technologie und auf Seide wie Luxus.
- Eine Textur ist schwerer zu kopieren als ein HEX-Code, weil sie eine Kombination aus Material, Licht und Maßstab ist statt eines einzelnen Werts.
- Gute Markentextur ist ruhig genug, um hinter Wörtern zu stehen, und konsequent genug, um in jedem Format erkannt zu werden.
- Körnung kaschiert außerdem Farbabrisse, sie verbessert also die Qualität ebenso wie den Charakter.

**Markentextur** ist die Materialqualität von allem, was eine Marke auf eine Fläche bringt: die Körnung in einem Hintergrund, die Struktur eines Papiers, der Glanz von Glas, Richtung und Weichheit des Lichts. Sie ist der Unterschied zwischen einer Farbe auf einem Bildschirm und einer Farbe auf etwas. Zwei Marken können eine Palette und eine Schrift teilen, aber wenn die eine auf feiner Filmkörnung steht und die andere auf sauberem Glas, verwechselt sie niemand.

Textur ist zudem einer der wenigen Teile eines Looks, die sich dem Kopieren widersetzen. Deine HEX-Codes kann jeder aus einem Screenshot ablesen. Deine genaue Körnung nachzubauen, ihre Größe, ihre Dichte, wie das Licht über sie fällt, ist viel schwerer, und das macht sie zu einem starken Kandidaten für die Signatur deiner [visuellen Identität](https://gradiently.design/de/guide/visual-identity).

## Was Textur mit einer Marke macht

Textur trägt Assoziationen, die Menschen sofort aufnehmen, lange bevor sie ein Wort lesen. Sie beantwortet Fragen wie: Ist das handgemacht oder konstruiert, warm oder kühl, alltäglich oder besonders?

| Texturfamilie | Wirkt | Passt zu |
| --- | --- | --- |
| Feine Filmkörnung | Analog, redaktionell, durchdacht | Studios, Verlagen, Fotografen, Musik |
| Papierstruktur | Handwerklich, gedruckt, ruhig | Manufakturen, Bäckereien, Papeterie, Wellness |
| Glasiger Glanz | Präzise, digital, modern | Software, Fintech, Produktlaunches |
| Seiden- oder Satinlicht | Weich, teuer, sinnlich | Beauty, Schmuck, Mode, Hotels |
| Saubere flache Farbe | Direkt, grafisch, kühn | Kampagnen, Sport, junge Marken |

Fünf gängige Texturfamilien und das Gefühl, das jede mitbringt. Flache Farbe ist auch eine Texturentscheidung: Das Fehlen von Material sagt etwas.

Keine davon ist besser als eine andere. Entscheidend ist, dass die Textur zu dem passt, was du über dich sagst. Eine Marke, die von langsamem Handwerk spricht und auf glänzendem Glas postet, sendet eine gemischte Botschaft. [Markenpersönlichkeit](https://gradiently.design/de/guide/brand-personality) ist ein guter Ausgangspunkt, wenn du nicht sicher bist, was deine sagen soll.

## Körnung, Material und Licht: die drei Schichten

Die meisten Texturen, die reich wirken, bestehen aus drei Schichten. Sie getrennt zu denken macht Textur zu etwas, das du bewusst gestalten kannst, statt eines Filters, den du am Ende darüberlegst.

1. **Material** Das Grundverhalten der Oberfläche: wie Farbe über sie fließt. Weiche Übergänge, sanfte Falten, flüssige Formen oder klare Facetten.
2. **Licht** Woher es kommt und wie hart es ist. Ein weiches Licht aus einer Ecke gibt Tiefe; gleichmäßiges Licht wirkt flach und digital.
3. **Körnung** Das feine Rauschen obendrauf. Ein wenig lässt eine Oberfläche echt wirken und kaschiert Farbabrisse; zu viel wirkt schmutzig und kämpft gegen die Wörter.

- Gleichmäßig, ohne Lichtquelle: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #a5b4fc 100%)`
- Weiches Licht, oben rechts: `radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%)`
- Warmes Licht, unten links: `radial-gradient(ellipse at 20% 100%, #f9a8d4 0%, #7e22ce 35%, #1e1b4b 75%)`

Eine Farbfamilie unter drei Arten von Licht. Allein das Licht ändert die Stimmung, bevor überhaupt Körnung dazukommt.

Für die Körnungsschicht im Web reicht ein winziges SVG-Rauschen über dem Hintergrund. Halte die Deckkraft niedrig; du willst es eher spüren als sehen.

```css
.brand-surface {
  position: relative;
  background: radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%);
}

.brand-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Ein beleuchteter Farbverlauf mit einer feinen Rauschschicht darüber. Erhöhe `baseFrequency` für feinere Körnung, senke `opacity` für eine ruhigere.

[Farbverläufe mit Körnung](https://gradiently.design/de/guide/grainy-gradients) hat weitere Rezepte, und [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding) erklärt, warum Rauschen auch die Standardlösung für sichtbare Streifen in weichen Übergängen ist.

## So wählst du deine Markentextur

- **Beginne mit einem Wort.** Schreib das eine Gefühl auf, das Leute haben sollen, etwa „handwerklich“ oder „präzise“, und wähle die Familie, die dazu passt.
- **Teste sie hinter Wörtern.** Textur lebt unter Überschriften, Preisen und Daten. Macht sie diese in Handygröße schwerer lesbar, ist sie zu stark.
- **Prüfe sie an beiden Extremen.** Sieh sie dir auf einer Story in 1080×1920 und auf einer Visitenkarte in 1050×600 an. Körnung, die groß richtig aussieht, kann klein zu Brei werden.
- **Prüfe sie im Druck.** Körnung, die auf dem Bildschirm glänzt, kann auf Papier wie ein Druckfehler aussehen. Druck einen A5-Flyer, bevor du dich festlegst.

Ein hochformatiger Bäckereibeitrag mit den Worten Sauerteig, jeden Morgen, auf einem sanft texturierten Hintergrund

Eine weichere Oberfläche für eine Bäckerei: Das Material kann handgemacht sagen, bevor die Wörter es tun.

Ein hochformatiger Fintech-Beitrag mit den Worten Zahlungen, in Sekunden erledigt, auf einem anderen texturierten Hintergrund

Ein anderer Mark für ein Fintech-Produkt. Dasselbe Layout, eine völlig andere Marke.

## Fehler, die Textur billig aussehen lassen

### Vermeiden

- Ein Stockfoto von Papier unter allem
- Schwere Körnung, die Schrift unscharf macht
- Auf jeder Plattform eine andere Textur
- Textur hinter Wörtern, überall sonst flach
- Ein texturiertes Bild auf jede Größe skalieren

### Besser

- Eine Textur aus Material, Licht und Körnung
- Körnung, fein genug, um sie zu spüren, nicht zu bemerken
- Eine Oberfläche für Feed, Website und Druck
- Dieselbe Oberfläche in jedem Bild
- Die Textur in jeder Größe neu rendern

Am letzten Punkt scheitern viele Marken. Wird ein texturiertes Bild von einem quadratischen Beitrag auf ein breites Banner gestreckt, streckt sich auch die Körnung, und das Licht landet an einer seltsamen Stelle. Eine Textur sollte in der Größe gerendert werden, in der sie genutzt wird; darum geht es auch in [Hintergrundtextur](https://gradiently.design/de/guide/background-texture).

## Eine Textur zu deiner machen

Ein kostenloses Rausch-Overlay steht allen zur Verfügung, und genau das ist das Problem: Je beliebter eine Textur wird, desto weniger sagt sie über dich. Damit eine Textur dir gehören kann, muss sie eine spezifische Kombination sein, die sonst niemand nutzt.

Genau dafür ist ein Gradiently Mark gebaut. Jeder Mark ist ein Rezept aus Farben, bis zu drei gestapelten Materialien, Licht, Körnung und Bewegung, und jeder wird mit allen anderen abgeglichen, damit keine zwei gleich aussehen. Er rendert live in jeder Größe, in der du gestaltest, sodass Körnung und Licht immer richtig sitzen, und er nimmt seine Details hinter deinen Wörtern zurück, damit Überschriften lesbar bleiben. Wenn du einen Mark sicherst, kannst nur du damit exportieren. [Materialien eines Marks](https://gradiently.design/de/guide/mark-materials-explained) erklärt die Materialschichten genauer.

Ein Mark ist Textur als Markenelement: Material, Licht und Körnung in einem Rezept, mit einem Besitzer zur selben Zeit.

## FAQ

### Was ist Textur im Branding?

Die Materialqualität der visuellen Oberflächen einer Marke, etwa Körnung, Papier, Glanz oder Licht, die prägt, wie sich Farben und Wörter anfühlen.

### Hilft oder schadet Körnung der Lesbarkeit?

Feine Körnung mit geringer Deckkraft schadet meist nicht und hilft oft, weil sie Farbabrisse kaschiert. Schwere Körnung hinter kleiner Schrift lässt Buchstaben unscharf wirken, also halte sie dort zurückhaltend, wo Wörter stehen.

### Kann Textur Teil einer Markenidentität sein?

Ja. Eine einheitliche Textur auf jeder Oberfläche wird für sich wiedererkennbar, genauso wie eine Farbe oder Schrift.

### Wie füge ich einem Farbverlauf in CSS Körnung hinzu?

Leg mit einem Pseudoelement ein kleines SVG-Rauschbild über den Farbverlauf, mit etwa 10 bis 15 Prozent Deckkraft und dem Mischmodus Overlay.