Farbverlaeufe gehoeren zu den meistgenutzten Stilmitteln im modernen Webdesign. Hinter jedem geschmeidigen Verlauf steckt eine simple Mechanik: die Color-Stops. Sie legen fest, an welcher Position im Verlauf welche Farbe sitzt. Wer versteht, wie man mehrere Stops gleichmaessig in Prozent verteilt, baut harmonische Gradienten statt schiefer Farbsprunge. Dieser Ratgeber erklaert das Prinzip Schritt fuer Schritt.
Was sind Gradient-Stops?
Ein CSS-Gradient ist im Kern eine Liste von Farben mit Positionsangaben. Jede dieser Positionen ist ein Color-Stop und wird ueblicherweise in Prozent angegeben: 0 Prozent ist der Anfang des Verlaufs, 100 Prozent das Ende. Zwischen zwei Stops berechnet der Browser die Uebergangsfarben automatisch.
Ein einfacher Verlauf in CSS sieht so aus:
linear-gradient(90deg, #ff5722 0%, #2196f3 100%)blendet von Orange nach Blau ueber.- Fuegst du eine dritte Farbe hinzu, brauchst du auch fuer sie eine Position, etwa bei 50 Prozent.
Warum gleichmaessige Verteilung wichtig ist
Sobald du drei, vier oder fuenf Farben in einem Verlauf hast, stellt sich die Frage: An welche Prozentposition gehoert jede Farbe, damit der Uebergang gleichmaessig wirkt? Sitzen die Stops ungleich verteilt, entsteht schnell ein unruhiger Verlauf mit einer dominanten Farbe und gequetschten Uebergaengen.
Die Regel fuer eine gleichmaessige Verteilung ist einfach: Bei n Farben teilst du die Strecke von 0 bis 100 Prozent in n − 1 gleiche Abschnitte. Die Positionen ergeben sich dann als Vielfache dieses Abschnitts.
- 2 Farben: 0 % und 100 %.
- 3 Farben: 0 %, 50 %, 100 %.
- 4 Farben: 0 %, 33,3 %, 66,7 %, 100 %.
- 5 Farben: 0 %, 25 %, 50 %, 75 %, 100 %.
Diese Prozentwerte von Hand auszurechnen ist bei drei Farben trivial, bei sieben oder neun Farben aber fehleranfaellig. Genau dafuer gibt es den Gradient Stops Rechner: Du gibst die Anzahl der Farben an und bekommst die gleichmaessig verteilten Stop-Positionen in Prozent sofort ausgegeben, fertig zum Einsetzen in deinen CSS-Code.
Stops bewusst verschieben
Gleichmaessige Verteilung ist der saubere Ausgangspunkt, aber nicht immer das Ziel. Manchmal willst du, dass eine Farbe mehr Raum einnimmt. Dann verschiebst du den Stop bewusst: Setzt du eine Farbe von 50 auf 70 Prozent, bekommt der erste Farbbereich mehr Flaeche und der zweite weniger. Auch harte Kanten sind moeglich, indem zwei Stops dieselbe Position teilen, etwa fuer Streifenmuster ohne Uebergang.
Ein weiterer Profi-Trick sind Hint-Werte: Mit einem zusaetzlichen Prozentwert zwischen zwei Farben verschiebst du den Mittelpunkt des Uebergangs, ohne eine neue Farbe einzufuegen. So steuerst du, ob der Verlauf eher zur einen oder anderen Farbe tendiert.
Praktische Tipps fuer schoene Verlaeufe
Damit Gradienten edel statt grell wirken, helfen ein paar Grundregeln: Waehle Farben mit aehnlicher Helligkeit oder Saettigung, sonst entsteht ein sichtbares Grau in der Mitte. Bei Verlaeufen ueber den Farbkreis (etwa Blau zu Gelb) lohnt sich eine Zwischenfarbe, um matschige Toene zu vermeiden. Und teste den Verlauf auf hellem wie dunklem Hintergrund.
Wenn du passende Farbtoene fuer deinen Verlauf suchst, hilft der Farbpalette Generator, der aus einer Basisfarbe stimmige Begleitfarben ableitet. Fuer responsive Layouts rund um den Verlauf ist ausserdem der CSS Clamp Generator praktisch. Die gesamte Sammlung an Design- und Developer-Tools findest du unter kotsch.tech/webtools.
Fazit
Gradient-Stops sind der Schluessel zu sauberen Farbverlaeufen. Wer das Prinzip der gleichmaessigen Verteilung in n − 1 Abschnitten verstanden hat, kann jeden Verlauf gezielt aufbauen und anschliessend bewusst verfeinern. Die Mathematik dahinter ist simpel, die Wirkung im Design gross, und fuer die Prozentwerte musst du dank Rechner nie wieder im Kopf dividieren.