Die Kurzfassung
- 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.
Auf dieser Seite
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 und die Arten von Farbverläufen.
| 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 |
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.
linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)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.
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.
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.
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 festgeschrieben, und Anfang der 2010er konnte jeder große Browser einen Farbverlauf ohne Bild zeichnen.
/* 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); }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.
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 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.
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 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.
radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)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.
GR·BBGB·1K
Lilac Pulse
Diesen Mark ansehenHäufige Fragen
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.
Geschrieben von Gradiently
Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.
Unser Profil ansehen
