# Was ist ein Farbverlauf? Ein einfacher Leitfaden zu Farbübergängen [Canonical HTML page](https://gradiently.design/de/guide/what-is-a-gradient) Ein Farbverlauf ist die einfachste Idee der Farbe und eine der am leichtesten verpatzten. Hier steht, was er ist, wie er aufgebaut ist und warum er überall auf Bildschirme zurückgekehrt ist. ## The short version - Ein Farbverlauf ist ein allmählicher Übergang von einer Farbe zur anderen über eine Fläche, statt einer einzigen flachen Farbe. - Jeder Farbverlauf wird durch seine Farbstopps, deren Positionen, eine Form oder Richtung und den Farbraum bestimmt, in dem zwischen ihnen gemischt wird. - Die wichtigsten Arten sind linear, radial, konisch und Mesh, und jede bewegt Farbe auf andere Weise durch den Raum. - Farbverläufe kamen auf Bildschirmen wieder in Mode, weil sie Licht, Tiefe und Bewegung andeuten, wie es flache Farbe nicht kann. - Die meisten Probleme mit Farbverläufen, etwa Streifen und graue Mitten, entstehen in der Mischung selbst und lassen sich mit besseren Stopps, einem besseren Farbraum oder etwas Körnung beheben. **Was ist ein Farbverlauf?** Im Design ist ein Farbverlauf ein weicher, allmählicher Wechsel von einer Farbe zur anderen über eine Fläche, etwa ein tiefes Blau, das auf einem Poster in Violett übergeht. Wo eine flache Füllung jedes Pixel gleich färbt, gibt ein Farbverlauf jedem Punkt seine eigene Farbe, errechnet aus ein paar Farben, die du wählst, und wo du sie platzierst. Diese kleine Änderung ist der Grund, warum ein Farbverlauf wie Licht, Luft oder Tiefe aussehen kann, und warum er auch leicht billig wirkt. Diese Seite erklärt die Teile, aus denen jeder Farbverlauf besteht, die wichtigsten Arten, wo Farbverläufe eingesetzt werden und warum sie zurückgekehrt sind. Jeder Abschnitt verlinkt auf einen ausführlicheren Leitfaden, wenn du die Details willst. ## Die Teile eines Farbverlaufs Jeder Farbverlauf, ob in einem Designprogramm gezeichnet, in CSS geschrieben oder von einer Game-Engine gerendert, läuft auf dieselben wenigen Zutaten hinaus. Kannst du sie benennen, beschreibst du jeden Verlauf so genau, dass jemand anderes ihn nachbauen kann. | Teil | Was es bedeutet | Beispiel | | --- | --- | --- | | Farbstopps | Die Farben, durch die der Verlauf läuft | `#1e1b4b`, `#7c3aed`, `#f472b6` | | Stopp-Positionen | Wo jede Farbe sitzt, von 0 % bis 100 % | Violett bei 55 % statt 50 % | | Form oder Richtung | Der Pfad, auf dem die Farbe wandert | 135 Grad oder ein Kreis von der Mitte aus | | Interpolation | Der Farbraum, in dem zwischen den Stopps gemischt wird | sRGB, OKLab oder OKLCH | | Textur | Alles, was über die Mischung gelegt wird | Körnung, Papierstruktur, ein Schimmer | Fünf Dinge beschreiben einen Farbverlauf vollständig. Die meisten denken nur an das erste. Mitternacht, Violett, Pink: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)` Drei Stopps auf einer Linie von 135 Grad. Violett sitzt bei 55 % statt in der Mitte, sodass die dunkle linke obere Ecke mehr Raum bekommt. Stopp-Positionen zählen genauso viel wie Farben. Schieb den mittleren Stopp von 50 % auf 65 %, und dieselben drei Farben erzählen eine andere Geschichte: mehr Schatten, ein späterer Sonnenaufgang. Wenn du die Richtung im Detail verstehen willst, lies [in welche Richtung ein Farbverlauf laufen sollte](https://gradiently.design/de/guide/gradient-angle). ## Weiche und gestufte Farbverläufe Ein weicher Farbverlauf mischt stufenlos zwischen den Stopps. Ein gestufter Verlauf mit harten Stopps setzt zwei Stopps an dieselbe Position, sodass die Farbe springt, statt zu mischen. Harte Stopps ergeben Streifen, Flaggen, Fortschrittsbalken und Retro-Sonnenuntergänge; es sind trotzdem Farbverläufe, nur mit abgeschalteter Mischung an diesen Stellen. - Weich: Petrol zu Mint: `linear-gradient(90deg, #0f766e 0%, #5eead4 100%)` - Gestuft: drei harte Bänder: `linear-gradient(90deg, #0f766e 0% 33%, #14b8a6 33% 66%, #5eead4 66% 100%)` - Weich: Sonnenuntergang mit vier Stopps: `linear-gradient(180deg, #fde68a 0%, #fb923c 45%, #db2777 70%, #312e81 100%)` - Gestuft: der Sonnenuntergang in Bändern: `linear-gradient(180deg, #fde68a 0% 25%, #fb923c 25% 50%, #db2777 50% 75%, #312e81 75% 100%)` Dieselben Farben, gemischt und gestuft. Gestufte Versionen wirken grafisch und bewusst, weiche Versionen wie Licht. Weiche Farbverläufe haben eine Schwäche: Bildschirme zeigen nur eine begrenzte Zahl an Abstufungen, deshalb kann eine sehr sanfte Mischung in sichtbare Streifen zerfallen. Dieses Problem hat einen eigenen Leitfaden: [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding). ## Die wichtigsten Arten von Farbverläufen Die Art ist die Form, entlang der die Farbe wandert. Vier Arten decken fast alles ab, was dir begegnen wird, und [Arten von Farbverläufen](https://gradiently.design/de/guide/types-of-gradients) zeigt jede mit Live-Code. - **Linear:** Die Farbe ändert sich entlang einer geraden Linie in einem Winkel. Das Arbeitspferd für Hintergründe, Buttons und Banner. Siehe [lineare CSS-Farbverläufe](https://gradiently.design/de/guide/css-linear-gradient). - **Radial:** Die Farbe breitet sich von einem Punkt als Kreis oder Ellipse aus, wie ein Spotlight oder ein Leuchten. Siehe [radiale Farbverläufe](https://gradiently.design/de/guide/radial-gradient). - **Konisch:** Die Farbe dreht sich um einen Mittelpunkt, wie der Zeiger einer Uhr. Gut für Farbkreise, Tortendiagramme und Schimmer. Siehe [konische Farbverläufe](https://gradiently.design/de/guide/conic-gradient). - **Mesh:** Mehrere Farbpunkte mischen sich gleichzeitig in zwei Dimensionen, sodass das Ergebnis organisch und malerisch wirkt. Siehe [Mesh-Farbverläufe](https://gradiently.design/de/guide/mesh-gradients). - Linear: `linear-gradient(135deg, #0c4a6e 0%, #38bdf8 100%)` - Radial: `radial-gradient(circle at 30% 35%, #fef3c7 0%, #f59e0b 35%, #7c2d12 100%)` - Konisch: `conic-gradient(from 90deg at 50% 50%, #f472b6, #a78bfa, #38bdf8, #34d399, #fbbf24, #f472b6)` Linear, radial und konisch, jeweils als ein einziger CSS-Wert. Mesh-Verläufe brauchen mehrere Ebenen oder ein eigenes Werkzeug. ## Wie Farben sich mischen: der Teil, den viele überspringen Zwischen zwei Stopps muss die Software jede Farbe dazwischen erfinden. Wie sie das tut, hängt vom Farbraum ab. Die meisten Werkzeuge und älteres CSS mischen in sRGB, das Rot-, Grün- und Blauwerte auf geraden Linien mischt. Das ist schnell, kann aber durch trübe Grautöne laufen, besonders zwischen gegensätzlichen Farben wie Blau und Gelb. Neuere Farbräume wie OKLab und OKLCH sind danach aufgebaut, wie Menschen Helligkeit und Farbton wahrnehmen, sodass Mischungen heller und gleichmäßiger bleiben. In CSS kannst du sie direkt anfordern, und der Unterschied ist leicht zu sehen. Die ganze Geschichte und die Lösungen stehen in [matschige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients). ```css .sky { /* default: blended in sRGB, passes through grey */ background: linear-gradient(90deg, #0000ff, #ffff00); } .sky-better { /* blended in OKLCH, travels round the hue wheel through teal */ background: linear-gradient(90deg in oklch, #0000ff, #ffff00); } ``` Ein zusätzlicher Ausdruck ändert den Farbraum. Unterstützt in aktuellen Versionen der großen Browser. ## Wo Farbverläufe eingesetzt werden Farbverläufe verdienen ihren Platz überall dort, wo eine Fläche beleuchtet oder lebendig wirken soll, ohne ein Foto hinzuzufügen. Die häufigsten Aufgaben sind Hintergründe für Social-Media-Beiträge und Websites, App-Icons, Buttons und Hervorhebungen in Oberflächen, Verpackungen, Poster und Markenidentitäten, die eine Mischung so nutzen wie andere Marken eine Farbe. Für die Identitätsseite siehe [Branding mit Farbverläufen](https://gradiently.design/de/guide/gradient-branding). Ein Hochformat-Beitrag für Social Media mit einer kurzen Überschrift auf einem leuchtenden Farbverlaufshintergrund Als Hintergrund trägt ein Farbverlauf die Stimmung, sodass die Wörter kurz bleiben können. Eine Breitbild-Folie mit dem Titel Atelier-Notizen auf demselben Farbverlauf wie der Beitrag daneben Als Identität hält derselbe Farbverlauf auf einer Folie jedes Format wiedererkennbar. ## Warum Farbverläufe zurückkamen Farbverläufe waren in den glänzenden Oberflächen der 2000er überall und gerieten dann aus der Mode, als Flat Design Anfang der 2010er die Bildschirme übernahm. Sie kehrten in leiserer Form zurück: weniger Abschrägungen und falsche Spiegelungen, mehr weiche Mischungen aus zwei oder drei Farben. Hochauflösende Displays halfen, weil weiche Farbe auf dichten Bildschirmen besser aussieht, und Marken, die etwas Unverwechselbareres als einen flachen Farbton suchten, fanden in Mischungen Raum. Den langen Blick zurück wirft [die Geschichte der Farbverläufe](https://gradiently.design/de/guide/history-of-gradients). Heute gehen die interessantesten Farbverläufe über Farbe hinaus. Körnung, Textur und langsame Bewegung lassen eine Mischung wie ein Material wirken statt wie eine Voreinstellung, darum geht es in [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients) und [Farbverlauf-Textur](https://gradiently.design/de/guide/gradient-texture). ### Ein Farbverlauf, der beliebig wirkt - Zwei Farben direkt aus einer Voreinstellung - In sRGB gemischt, mit grauer Mitte - Völlig sauber, daher Banding auf dunklen Bildschirmen - Auf jedes Format gedehnt oder zugeschnitten ### Ein Farbverlauf, der durchdacht wirkt - Drei bis fünf verwandte Farben mit einem Akzent - In OKLCH gemischt oder mit gewähltem mittlerem Stopp - Etwas Körnung gegen Streifen und für Haptik - Für jede Größe neu gerendert Wenn du lieber mit einer fertigen Mischung beginnst, statt eine von Grund auf zu bauen, findest du im [Markt](/market) Tausende Marks: vollständige Farbverlaufsrezepte mit Farbe, Material, Körnung und Licht, mit denen du kostenlos gestalten kannst. ## FAQ ### Was ist ein Farbverlauf, einfach erklärt? Ein Farbverlauf ist ein allmählicher Wechsel von einer Farbe zur anderen über eine Fläche, sodass jeder Punkt eine leicht andere Farbe zeigt statt einer flachen Füllung. ### Was sind Farbstopps in einem Farbverlauf? Farbstopps sind die Farben, durch die ein Farbverlauf läuft, jede an einer Position zwischen 0 % und 100 %. Die Software mischt jede Farbe dazwischen. ### Was sind die wichtigsten Arten von Farbverläufen? Die wichtigsten Arten sind linear, radial, konisch und Mesh. Linear folgt einer geraden Linie, radial breitet sich von einem Punkt aus, konisch dreht sich um eine Mitte, und Mesh mischt mehrere Punkte in zwei Dimensionen. ### Warum sieht mein Farbverlauf in der Mitte grau aus? Gegensätzliche Farben im Farbraum sRGB zu mischen, führt durch Grau. Füge einen gewählten mittleren Stopp hinzu, nutze nähere Farbtöne oder mische in OKLCH. ### Warum hat mein Farbverlauf Streifen? Bildschirme zeigen pro Kanal nur eine begrenzte Zahl an Abstufungen, deshalb werden feine Mischungen sichtbar stufig. Etwas Körnung oder Rauschen und keine starke Kompression verstecken die Stufen.