# Eine kurze Geschichte der Farbverläufe im Design

[Canonical HTML page](https://gradiently.design/de/guide/history-of-gradients)

Farbübergänge sind älter als Bildschirme, fielen fast über Nacht aus der Mode und kamen stärker zurück. So reiste der Farbverlauf von gemalten Himmeln zu lebendigen Hintergründen.

## The short version

- Maler mischten Farben lange vor den Bildschirmen und nutzten weiche Tonübergänge und dunstig blaue Fernen, um Tiefe und Licht anzudeuten.
- Frühe Computerbildschirme konnten zu wenige Farben für weiche Übergänge zeigen, deshalb erschienen Farbverläufe als sichtbare Streifen oder gerasterte Muster.
- Apples Aqua-Oberfläche, im Jahr 2000 vorgestellt, machte glänzende Farbverläufe zum prägenden Look des folgenden Jahrzehnts.
- Flat Design drängte Farbverläufe Anfang der 2010er zur Seite, am sichtbarsten mit Windows 8 im Jahr 2012 und iOS 7 im Jahr 2013.
- Farbverläufe kehrten Mitte der 2010er zurück, mit Instagrams Verlaufs-Icon von 2016 als bekanntestem Beispiel, und sind seitdem zu Mesh-, Körnungs- und Shader-Looks gewachsen.

Die **Geschichte der Farbverläufe** im Design ist eine Geschichte davon, wie die Technik die Malerei einholt. Künstler mischten Farben über Jahrhunderte, der Druck lernte, es mit Punkten und geteilter Farbe vorzutäuschen, frühe Bildschirme konnten es kaum zeigen, die glänzenden Oberflächen der 2000er übertrieben es, Flat Design entfernte es, und Mitte der 2010er kam es zurück und ging nie wirklich wieder. Die Farbverläufe jeder Epoche sehen so aus, wie sie aussehen, wegen der Werkzeuge ihrer Zeit.

Das ist eine kurze, praktische Geschichte, mit dem Look jeder Epoche als Farbverlauf zum Kopieren. Zu den Grundlagen siehe [was ist ein Farbverlauf](https://gradiently.design/de/guide/what-is-a-gradient) und die [Arten von Farbverläufen](https://gradiently.design/de/guide/types-of-gradients).

| Wann | Was geschah | Der Verlaufs-Look |
| --- | --- | --- |
| Renaissance | Sfumato und Luftperspektive in der Malerei | Weiche Tonübergänge, dunstig blaue Ferne |
| 1704 | Newtons *Opticks* ordnet das Spektrum im Kreis an | Der erste Farbkreis |
| Spätes 19. Jahrhundert | Rasterdruck | Tonwerte aus Punkten |
| Frühe 1990er | Bildschirme mit 256 Farben | Banding und Dithering |
| 2000 bis 2007 | Aqua, Luna von Windows XP, Web 2.0, Aero von Vista | Glanz, Gel und Glas |
| 2012 bis 2014 | Windows 8, iOS 7, Material Design | Vollfarbe, sanfte Übergänge |
| 2016 | Instagrams Verlaufs-Icon | Leuchtende Übergänge kehren zurück |
| Ab Ende der 2010er | Mesh, konisch, Körnung, Shader | Weiche Lichtfelder und Bewegung |

Die Geschichte des Farbverlaufs auf einen Blick.

## Farbverläufe vor den Bildschirmen: Malerei und Druck

Maler mischten Farben, lange bevor jemand es Farbverlauf nannte. Künstler der Renaissance nutzten das *Sfumato*, weiche Tonübergänge ohne harte Umrisse, eine Technik, die vor allem mit Leonardo da Vinci verbunden wird. Landschaftsmaler nutzten die Luftperspektive: Ferne Hügel verblassen in einem hellen, bläulichen Dunst, und der Himmel wird zum Horizont hin heller. Das ist der älteste Farbverlauf, den die meisten von uns kennen.

Gemalter Himmel, Zenit bis Horizont: `linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)`

Tiefes Blau oben, das am Horizont zu einem warmen Dunst verblasst: der Übergang, mit dem Landschaftsmaler Raum tief wirken ließen.

Die Wissenschaft gab Farbübergängen ihre Ordnung. Isaac Newtons Prismenversuche fächerten weißes Licht in ein durchgehendes Spektrum auf, und seine *Opticks* (1704) ordneten dessen Farben im Kreis an, dem Vorfahren jedes [Farbkreises](https://gradiently.design/de/guide/color-wheel).

Der Druck musste Halbtöne vortäuschen. Rasterverfahren, im späten 19. Jahrhundert entwickelt, verwandelten Tonwerte in Punkte verschiedener Größe. Drucker nutzten außerdem den Irisdruck: zwei oder mehr Farben nebeneinander in einem Farbwerk, die auf den Walzen ineinanderlaufen, eine Technik, die im Siebdruck und Buchdruck bis heute beliebt ist. Die Airbrush gab Illustratoren weiche Übergänge von Hand und prägte viele Poster und Albumcover der 1970er und 1980er.

- Irisdruck, Rot in Blau: `linear-gradient(90deg, #d7263d 0%, #7a4f8f 50%, #1b98e0 100%)`
- Airbrush-Sonnenuntergang: `linear-gradient(180deg, #1b1340 0%, #7b2d6e 45%, #f06a3f 75%, #ffd27a 100%)`

Zwei Looks aus der Zeit vor dem Digitalen. Ein Irisdruck mischt echte Farben, seine Mitte ist also ein dunkleres Lila, Airbrush-Himmel stapelten warme Bänder unter einem dunklen oberen Teil.

## Frühe Bildschirme: Banding, Dithering und gekachelte Bilder

Frühe Computerbildschirme konnten nur eine begrenzte Zahl von Farben gleichzeitig zeigen, und die 256-Farben-Paletten, die Anfang der 1990er üblich waren, konnten keinen weichen Übergang halten. Farbverläufe zerfielen in sichtbare Streifen, Banding genannt, oder wurden zu Punktmustern gerastert, die das Auge zu einem Übergang mittelte. Dieselben Streifen erscheinen heute noch, wenn ein Verlauf lang und subtil ist, siehe [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding).

- Gestufter Übergang, fünf Farben: `linear-gradient(90deg, #14145c 0% 20%, #26268a 20% 40%, #3a3ab4 40% 60%, #5454d6 60% 80%, #7676f0 80% 100%)`
- Derselbe Übergang, weich: `linear-gradient(90deg, #14145c 0%, #7676f0 100%)`

Was eine begrenzte Palette mit einem Übergang macht. Mit nur fünf Farben wird ein weicher Verlauf zur Treppe.

Das frühe Web hatte überhaupt keine Verlaufsfunktion. Designer machten ein Verlaufsbild von einem Pixel Breite und ließen den Browser es über die Seite wiederholen. SVG, seit 2001 eine W3C-Empfehlung, enthielt zwar lineare und radiale Verläufe, CSS-Verläufe kamen aber später: WebKit führte Ende der 2000er eine Syntax mit Präfix ein, die Standardversion wurde in [CSS Images Level 3](https://www.w3.org/TR/css-images-3/) festgeschrieben, und Anfang der 2010er konnte jeder große Browser einen Farbverlauf ohne Bild zeichnen.

```css
/* Early 2000s: a 1px-wide image, repeated across */
.header { background: #2b7ae0 url(header-bg.png) repeat-x; }

/* 2010s: the browser draws the gradient */
.header { background: linear-gradient(180deg, #6fb4f5, #2b7ae0); }

/* Now: the same blend, interpolated in OKLCH */
.header { background: linear-gradient(180deg in oklch, #6fb4f5, #2b7ae0); }
```

Drei Epochen desselben Headers. Heute erledigt eine Zeile alles, mit [weicherem Mischen in OKLCH](https://gradiently.design/de/guide/css-gradient-oklch), wenn du es willst.

## Die glänzenden 2000er: Aqua, Luna und Web 2.0

Apple stellte im Jahr 2000 die Aqua-Oberfläche für Mac OS X vor: durchscheinende, glänzende Buttons, die wie Tropfen aus farbigem Gel aussahen, mit einem hellen Glanzlicht über dem oberen Teil. Windows XP folgte 2001 mit dem Luna-Design, blauen Titelleisten mit Verlaufsschattierung und einem grünen Start-Button. Mitte des Jahrzehnts waren glänzende Buttons, spiegelnde Logos und weiche Schatten auf Websites so verbreitet, dass der Look zum Kürzel für Web 2.0 wurde.

- Gel-Button im Aqua-Stil: `linear-gradient(180deg, #d9efff 0%, #8cc8f7 48%, #3d8ee6 52%, #74c1ff 100%)`
- Titelleiste im Luna-Stil: `linear-gradient(180deg, #3a8cf4 0%, #0a5fd8 12%, #0453d0 80%, #0a3fa8 100%)`
- Glänzendes Web-2.0-Grün: `linear-gradient(180deg, #b6e67a 0%, #7cc242 50%, #5ea82a 51%, #8fd14f 100%)`
- Glas im Aero-Stil: `linear-gradient(180deg, #e8f3fb 0%, #bcd8ee 50%, #9cc3e3 51%, #d2e8f7 100%)`

Der Kniff der Epoche: ein plötzlicher Tonwechsel auf halber Höhe, den das Auge als Spiegelung auf einer glänzenden Oberfläche liest.

Das Aero-Glas von Windows Vista ging 2007 noch weiter in Richtung Transparenz. Das Problem war die Wiederholung: Als jeder Button, jedes Badge und jedes Logo dasselbe Glanzlicht trug, signalisierte Glanz keine Qualität mehr, sondern eine Vorlage. Der Ratgeber zur [Y2K-Ästhetik](https://gradiently.design/de/guide/y2k-aesthetic) behandelt den breiteren Look dieser Jahre.

## Die Wende zum Flat Design: Metro und iOS 7

Microsofts Designsprache Metro, zuerst auf Windows Phone und dann 2012 in ganz Windows 8, nutzte einfarbige Kacheln, schlichte Schrift und überhaupt keinen Glanz. Apples iOS 7 ließ 2013 das genähte Leder, den Filz und die Texturen früherer Versionen fallen, zugunsten eines flachen, hellen Designs. Googles Material Design, 2014 vorgestellt, hielt Farbe flach, nutzte aber Schatten, um Ebenen zu zeigen.

### Glänzende 2000er

- Ein hartes Glanzlicht auf halber Höhe
- Spiegelungen und Abschrägungen
- Farbverläufe auf jedem Bedienelement, als Deko
- Nachahmungen echter Materialien

### Flache 2010er

- Vollfarbe oder ein sanfter zweifarbiger Übergang
- Keine Abschrägungen, minimaler Schatten
- Farbe zum Ordnen, nicht zum Dekorieren
- Schrift und Raum leisten die Arbeit

Farbverläufe verschwanden nicht, sie änderten ihren Charakter. Viele der neuen App-Icons von iOS 7 nutzten leuchtende, sanfte Verläufe von oben nach unten statt Glanz, ein Vorgeschmack auf das, was kommen sollte.

## Der Farbverlauf kehrt zurück: Instagram und die Mitte der 2010er

2016 ersetzte Instagram sein Kamera-Icon durch eine schlichte Kontur über einem Verlauf von Warm zu Violett, einen der sichtbarsten Marken-Farbverläufe überhaupt. Ungefähr zur selben Zeit begannen Apps und Marken, flache Layouts mit kräftigen, leuchtenden Verläufen zu kombinieren, oft zwei Farben, schräg gemischt. Flat Design hatte die Dekoration beseitigt, Farbverläufe kehrten als Farbe und Stimmung zurück statt als falscher Glanz.

- Leuchtendes Grün im iOS-7-Stil: `linear-gradient(180deg, #87fc70 0%, #0bd318 100%)`
- Gelb über Pink zu Violett: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%)`
- Violett zu Pink, Preset-Ära: `linear-gradient(135deg, #7f5af0 0%, #ff6ac1 100%)`
- Blau zu Cyan, Preset-Ära: `linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)`

Der Look der Rückkehr: flache Layouts, leuchtende Übergänge. Zweifarbige Paare wie die letzten beiden wurden so häufig, dass sie heute wie Presets wirken.

Dieser Erfolg hatte seinen Preis. Generatoren und Design-Tools lieferten dieselben Paare aus, und am Ende des Jahrzehnts sahen viele Feeds gleich aus, ein Problem, das [warum jeder Feed gleich aussieht](https://gradiently.design/de/guide/why-every-feed-looks-the-same) behandelt.

## Farbverläufe heute: Mesh, Körnung, Shader und Bewegung

Das jüngste Kapitel dreht sich um Tiefe und Kontrolle. Mesh-Verläufe, bei denen mehrere Farbpunkte in verschiedene Richtungen ziehen, wanderten aus spezialisierten Vektorprogrammen in alltägliche Design-Apps. `conic-gradient()`, in CSS Images Level 4 definiert, kam ab 2018 in die Browser. WebGL-Shader lassen Websites Verläufe rendern, die sich in Echtzeit bewegen und reagieren, Körnung kehrte zurück, um digitale Farbe körperlich wirken zu lassen, und 2025 stellte Apple Liquid Glass vor, ein durchscheinendes Material auf allen seinen Plattformen.

Ein weiches Lichtfeld: `radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)`

Licht statt Streifen oder Glanz: Pfirsich, der in Koralle, Violett und Nacht übergeht. Siehe [Mesh-Verläufe](https://gradiently.design/de/guide/mesh-gradients) und [Shader-Verläufe](https://gradiently.design/de/guide/shader-gradients) dazu, wie heutige Farbfelder entstehen.

Die neueste Idee ist, dass ein Farbverlauf eine Identität mit einem Besitzer sein kann, kein Stil, den jeder abgreifen kann. Die Marks von Gradiently sind lebendige Farbverläufe: Farben, Materialien, Licht, Körnung und Bewegung als ein Rezept, jeder mit einem öffentlichen Code und genau einem Besitzer zur selben Zeit. Wohin es als Nächstes geht, steht in [Farbverlauf-Trends 2026](https://gradiently.design/de/guide/gradient-trends-2026).

Ein Mark: eine Verlaufsidentität mit Code, Schöpfer und einem Besitzer.

## FAQ

### Wann wurden CSS-Verläufe eingeführt?

WebKit führte Ende der 2000er eine Verlaufssyntax mit Präfix ein, und die Standardfunktionen `linear-gradient()` und `radial-gradient()` wurden in CSS Images Level 3 definiert. Anfang der 2010er unterstützte sie jeder große Browser ohne Bild.

### Warum kamen Farbverläufe aus der Mode?

Ende der 2000er waren glänzende Farbverläufe auf fast jedem Button und Logo, sie wirkten also nicht mehr besonders. Flat Design, angeführt von Windows 8 im Jahr 2012 und iOS 7 im Jahr 2013, ersetzte sie durch Vollfarbe und schlichte Schrift.

### Wann kamen Farbverläufe wieder in Mode?

Mitte der 2010er. Instagrams Verlaufs-Icon von 2016 ist das bekannteste Beispiel, und leuchtende zweifarbige Übergänge verbreiteten sich bald danach in Apps, Websites und Marken.

### Was war Apples Aqua-Oberfläche?

Aqua war der Look, den Apple im Jahr 2000 für Mac OS X vorstellte, mit glänzenden, gelartigen Buttons und durchscheinenden Flächen. Er prägte den glänzenden Verlaufsstil des Jahrzehnts.

### Was kam nach dem Flat Design?

Flache Layouts mit satter Farbe: zuerst leuchtende Farbverläufe, dann Mesh-Verläufe, Körnung, Shader-Bewegung und zuletzt durchscheinende Materialien wie Apples Liquid Glass.