# Farbverlauf-Design: 25 Ideen für Posts, Folien und Marken

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

Gutes Farbverlauf-Design beginnt mit einer Idee, was die Farbe tut, nicht mit einer Voreinstellung. Hier sind fünfundzwanzig solche Ideen, gruppiert danach, wo du sie einsetzt.

## The short version

- Farbverlauf-Design funktioniert am besten, wenn der Verlauf eine Aufgabe hat: auf etwas zeigen, Bereiche trennen, eine Stimmung tragen oder eine Marke kennzeichnen.
- Bei Social Posts paaren die stärksten Verlaufsideen eine kurze Textzeile mit einer ruhigen, beleuchteten Stelle der Fläche.
- Bei Folien gibt ein Verlauf, der sich schrittweise durch das Deck verschiebt, Struktur, ohne jede Seite zu dekorieren.
- Bei Marken ist ein konsistenter Verlauf mit einfarbiger Ersatzfarbe nützlicher als ein anderer Verlauf für jeden Kanal.
- Im Web sind Verläufe in CSS günstig zu rendern und eignen sich gut für Hero-Glow, Rahmen und ein einzelnes hervorgehobenes Wort.

**Farbverlauf-Design** heißt, Farbmischungen als strukturellen Teil eines Layouts zu nutzen und nicht nur als Hintergrundfüllung. Die Ideen unten geben dem Verlauf jeweils eine Aufgabe: zeigen, trennen, eine Stimmung setzen oder wiedererkannt werden. Sie sind danach gruppiert, wo du sie einsetzt, in Posts, Folien, Marken und im Web, und jede kommt mit dem Layout oder Code zum Ausprobieren.

Wenn du zuerst Farben brauchst, beginne mit [Farbverlauf-Kombinationen](https://gradiently.design/de/guide/gradient-color-combinations) und komm dann zurück, um zu entscheiden, was du damit machst.

## Farbverlauf-Design-Ideen für Social Posts

1. **Spotlight-Überschrift.** Eine kurze Zeile auf der hellsten Stelle eines [radialen Leuchtens](https://gradiently.design/de/guide/radial-gradient). Das Licht sagt den Leuten, wo sie lesen sollen.
2. **Ein-Wort-Poster.** Ein einziges großes Wort auf einer satten Fläche. Das klappt nur, wenn das Wort den Platz verdient, nimm also ein Verb oder einen Namen.
3. **Geteilte Fläche.** Zwei Verläufe, die an einer harten Kante aufeinandertreffen, einer für die Überschrift und einer für das Detail. Die Kante wird zur Layoutlinie.
4. **Zahlen-Karte.** Eine große Zahl auf einem ruhigen Verlauf mit einer Erklärung in einer Zeile. Halte die Fläche leise, damit die Zahl dominiert.

Ein Post im Hochformat mit einer kurzen Überschrift über der hellsten Stelle eines Farbverlaufs

Idee 1: eine Spotlight-Überschrift auf dem beleuchteten Teil der Fläche.

Ein Post im Hochformat mit dem einzelnen Wort „Langsam“ groß auf einem Farbverlauf

Idee 2: ein Wort, eine Fläche, sonst nichts.

Geteilte Fläche: `linear-gradient(90deg, #1e1b4b 0%, #4338ca 50%, #fb7185 50%, #fed7aa 100%)`

Idee 3: zwei Mischungen mit hartem Stopp bei 50 %. Setze die Überschrift auf die dunkle Hälfte und das Detail auf die helle.

1. **Frage-Post.** Eine Frage als Überschrift, die Antwort wird in der Bildunterschrift versprochen. Verläufe passen dazu, weil sie offen statt fertig wirken.
2. **Zitat auf weicher Fläche.** Ein kurzes Zitat auf einem kontrastarmen Verlauf, die Quellenangabe klein. Weichheit wirkt durchdacht, harte Farbe kämpft gegen die Worte.
3. **Countdown-Serie.** Derselbe Verlauf, jeden Tag ein paar Grad wärmer bis zum Launch. Die Serie wirkt geplant, und die Veränderung baut Vorfreude auf.
4. **Duotone-Foto.** Ein Foto, abgebildet auf die zwei Endfarben deines Verlaufs, sodass Fotografie und Hintergrund zusammengehören. Siehe [Duotone](https://gradiently.design/de/guide/duotone-effect).

- Tag 3: kühl: `linear-gradient(160deg, #0f172a 0%, #3730a3 60%, #818cf8 100%)`
- Tag 2: wärmer: `linear-gradient(160deg, #1a1433 0%, #6d28d9 60%, #c084fc 100%)`
- Tag 1: am wärmsten: `linear-gradient(160deg, #2a0f24 0%, #be185d 60%, #fda4af 100%)`
- Launch: volle Hitze: `linear-gradient(160deg, #3b0d0c 0%, #ea580c 60%, #fde68a 100%)`

Idee 7: ein Countdown, der von kühl zu warm wandert. Gleiche Struktur, gleicher Winkel, nur der Farbton ändert sich.

## Farbverlauf-Design-Ideen für Folien

1. **Titelfolie mit Horizont.** Ein dunkler oberer Bereich, der in ein helles Band nahe dem unteren Rand übergeht, mit dem Titel knapp darüber. Sie liest sich wie ein Sonnenaufgang und gibt dem Vortrag einen Anfang.
2. **Kapitelfolien in Folge.** Jede Kapitelfolie nimmt den nächsten Schritt einer Farbtonreise. Man weiß ohne Fortschrittsbalken, wie weit man im Deck ist.
3. **Ruhige Datenfolien.** Inhalts- und Diagrammfolien nutzen eine fast flache Version desselben Verlaufs, damit die Daten die Farbe tragen. [Präsentationshintergründe](https://gradiently.design/de/guide/presentation-backgrounds) behandelt den Kontrast für Text.
4. **Gespiegelte Schlussfolie.** Die letzte Folie dreht den Verlauf der Titelfolie von oben nach unten um. So schließt sich der Kreis auch visuell.
5. **Von hell zu dunkel.** Beginne hell und ende dunkel oder umgekehrt, wenn dein Vortrag vom Problem zur Antwort führt. Die Farbe unterstützt die Geschichte leise.
6. **Rahmen statt Füllung.** Ein dünner Verlaufsrahmen um eine neutrale Inhaltsfläche hält eine dichte Folie lesbar und bleibt trotzdem markentreu.

Eine Titelfolie im Breitformat mit Überschrift über einem leuchtenden Farbband

Idee 9: eine Titelfolie, bei der sich das Licht unten im Bild sammelt, unter dem Titel.

- Kapitel 1: `linear-gradient(135deg, #082f49 0%, #0e7490 100%)`
- Kapitel 2: `linear-gradient(135deg, #064e3b 0%, #059669 100%)`
- Kapitel 3: `linear-gradient(135deg, #365314 0%, #a3e635 100%)`
- Kapitel 4: `linear-gradient(135deg, #713f12 0%, #facc15 100%)`

Idee 10: Kapitelfolien, die entlang benachbarter Farbtöne wandern, von Petrol zu Gold. Mehr unter [Pitch-Deck-Design](https://gradiently.design/de/guide/pitch-deck-design).

## Farbverlauf-Design-Ideen für Marken

1. **Ein Signatur-Verlauf und eine Ersatzfarbe.** Wähle eine Mischung und eine einfarbige Farbe daraus für Favicons und einfarbigen Druck.
2. **Eine Familie für Produktlinien.** Behalte Struktur und Winkel bei und gib jeder Linie ihren eigenen Farbton. Die Familie bleibt erkennbar, jedes Produkt bleibt eigenständig.
3. **Verlauf nur hinter dem Logo.** Nutze den Verlauf an einer Stelle, im Logo-Lockup oder Icon der App, und sonst flache Farbe. Knappheit macht ihn einprägsam.
4. **Saisonale Verschiebungen.** Verschiebe denselben Verlauf im Sommer etwas wärmer und im Winter kühler, ohne seine Struktur zu ändern.
5. **Verlauf als Material.** Füge Körnung, einen seidigen Glanz oder Papierstruktur hinzu, damit der Verlauf wie eine Oberfläche wirkt. Textur ist schwerer zu kopieren als Farbe.
6. **Gedrucktes.** Übertrage den Verlauf auf Karten, Sticker und Verpackung, geplant für Druckfarbe. [Farbverläufe drucken](https://gradiently.design/de/guide/print-gradients) erklärt, was sich auf Papier ändert.

- Tintengrund: #101828
- Signalblau: #1d4ed8
- Violett: #7c3aed
- Zarte Orchidee: #f0abfc

Idee 15: eine Signatur-Verlaufsfamilie. Signalblau ist zugleich die einfarbige Ersatzfarbe, kleine Größen und einfarbiger Druck sind also schon geklärt.

Die Markenideen funktionieren nur mit Konsistenz: dieselben Farben, derselbe Winkel und dieselbe Textur in jedem Format. [Farbverlauf-Branding](https://gradiently.design/de/guide/gradient-branding) zeigt, wie du einen Verlauf besitzt, statt ihn zu leihen.

## Farbverlauf-Design-Ideen für Websites und Bewegung

1. **Hero-Glow.** Ein weiches radiales Leuchten hinter einem Produkt-Screenshot hebt ihn ohne Schlagschatten von der Seite ab.
2. **Ein Verlaufswort.** Wende einen Verlauf auf ein einzelnes Wort in einer Überschrift an, nie auf den ganzen Absatz. Siehe [Verlaufstext](https://gradiently.design/de/guide/css-gradient-text).
3. **Langsame Drift-Schleife.** Ein Hintergrund, der sich so langsam bewegt, dass man es erst nach ein paar Sekunden bemerkt. Er wirkt lebendig, ohne mit den Worten zu konkurrieren.
4. **Verlaufsrahmen an Karten.** Ein Verlaufsrand von 1 oder 2 Pixeln um sonst flache Karten gibt einer Seite eine Signatur, fast ohne visuelles Gewicht.
5. **Farbwechsel beim Scrollen.** Jeder Abschnitt einer langen Seite sitzt auf dem nächsten Schritt eines Verlaufs, sodass Scrollen sich anfühlt wie eine Bewegung durch Licht.

```css
.headline .accent {
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Idee 22: Verlauf nur auf einem Wort. Setze das Wort in ein span mit der Klasse `accent`.

Eine vertikale Story, die einen Studio-Umzug über einem sanft bewegten Farbverlauf ankündigt

Idee 23 in einer Story: Die Worte bleiben stehen, während der Hintergrund driftet.

## So wählst du die richtige Idee

### Schwacher Grund

- Der Hintergrund sah leer aus
- Eine Voreinstellung war schon offen
- Alle Mitbewerber nutzen einen
- Für jeden Post ein neuer Verlauf

### Starker Grund

- Der Verlauf zeigt auf das Wichtigste
- Er trennt Abschnitte oder Schritte in einer Folge
- Er trägt eine Stimmung, die die Worte brauchen
- Er wiederholt sich, sodass man ihn wiedererkennt

Wähle die Idee, die zur Aufgabe passt, und nutze sie eine Weile konsequent. Ein Verlauf, der sich über zwanzig Posts wiederholt, bewirkt mehr als zwanzig clevere Verläufe, die je einmal vorkommen. Palettenvorschläge für einzelne Branchen findest du unter [Farbverlauf-Ideen nach Branche](https://gradiently.design/de/guide/gradient-ideas-by-industry).

## FAQ

### Was ist Farbverlauf-Design?

Farbverlauf-Design heißt, Farbmischungen als strukturellen Teil eines Layouts zu nutzen, zum Beispiel um Aufmerksamkeit zu lenken, Bereiche zu trennen oder eine Marke zu tragen, und nicht nur als Hintergrundfüllung.

### Wie nutze ich Farbverläufe in einer Präsentation?

Nutze einen stärkeren Verlauf auf Titel- und Kapitelfolien und eine fast flache Version auf Inhaltsfolien, damit Text und Diagramme lesbar bleiben. Wenn sich der Farbton Schritt für Schritt durch die Kapitel ändert, folgt man der Struktur leichter.

### Sind Farbverläufe gut für Social-Media-Posts?

Ja, wenn die Worte auf einer ruhigen Stelle des Verlaufs sitzen und derselbe Look sich über mehrere Posts wiederholt. Ein anderer Verlauf auf jedem Post wirkt ungeplant.

### Wie mache ich Verlaufstext in CSS?

Setze einen Verlauf als Hintergrund, beschneide den Hintergrund mit background-clip: text auf den Text und mache die Textfarbe transparent. Nutze das für ein Wort oder eine kurze Überschrift, nicht für Fließtext.