# Farbstopps im Farbverlauf: Farben für weiche Übergänge setzen [Canonical HTML page](https://gradiently.design/de/guide/gradient-stops) Zwei Verläufe mit identischen Farben können völlig verschieden aussehen. Der Unterschied liegt darin, wo die Stopps sitzen und wie der Übergang zwischen ihnen verläuft. Das ist der Teil eines Verlaufs, den die meisten nie anfassen. ## The short version - Farbstopps sind die Punkte entlang eines Verlaufs, an denen eine bestimmte Farbe erreicht wird, geschrieben als Farbe gefolgt von einer Position wie `#7c3aed 40%`. - Stopps ohne Position werden gleichmäßig verteilt, und das ist selten die natürlichste Wahl. - Ein Farbhinweis ist ein einzelner Prozentwert zwischen zwei Stopps, der die Mitte ihres Übergangs verschiebt, ohne eine Farbe hinzuzufügen. - Zwei Stopps an derselben Position erzeugen eine harte Kante, so entstehen Streifen und scharfe Bänder in CSS. - Mehrere Zwischenstopps entlang einer Easing-Kurve beseitigen die sichtbare Kante, an der ein linearer Übergang beginnt und endet. **Farbstopps** sind die Punkte, an denen ein Verlauf eine bestimmte Farbe erreicht. In CSS besteht jeder Stopp aus einer Farbe und einer optionalen Position, etwa `#7c3aed 40%`, und der Browser mischt zwischen benachbarten Stopps geradlinig. Wo du sie setzt, entscheidet fast alles: ob ein Übergang weich oder abrupt wirkt, ob eine Farbe dominiert und ob das Auge eine Naht sieht, wo ein Übergang beginnt. Stopps zu verschieben bringt oft mehr, als Farben zu ändern. ## So funktionieren Farbstopps Eine Verlaufslinie reicht von 0 bis 100 Prozent. Jeder Stopp heftet eine Farbe an einen Punkt dieser Linie. Lässt du die Positionen weg, verteilt der Browser die Stopps gleichmäßig, drei Farben landen also bei 0, 50 und 100 Prozent. Zwischen jedem Paar ändert sich die Farbe mit konstanter Rate. Die vollständige Syntax ist in der [MDN-Referenz zu linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) dokumentiert. | Du schreibst | Was passiert | | --- | --- | | `#1e3a8a, #f472b6` | Zwei Stopps bei 0% und 100% | | `#1e3a8a 20%, #f472b6 80%` | Volles Marineblau bis 20%, Übergang, volles Pink ab 80% | | `#1e3a8a, 30%, #f472b6` | Ein Farbhinweis: Die Mitte rückt auf 30% | | `#1e3a8a 50%, #f472b6 50%` | Eine harte Kante in der Mitte, kein Übergang | | `#1e3a8a 0 40%, #f472b6 40% 100%` | Doppelte Position: zwei volle Bänder | | `#1e3a8a 10px, #f472b6 200px` | Längen funktionieren ebenso wie Prozente | Stopp-Syntax in CSS. Dieselben Ideen gelten in Figma, Photoshop und jedem Verlaufseditor, nur mit Schiebereglern. ## Warum gleichmäßig verteilte Stopps künstlich wirken Echtes Licht ändert sich selten gleichmäßig. Ein Sonnenuntergang ist überwiegend eine Farbe mit einem schmalen Band der Veränderung nahe dem Horizont; ein Schatten ist überwiegend Mittelton mit einem kurzen Abfall an seiner Kante. Gleichmäßige Verteilung gibt jeder Farbe denselben Anteil, und das wirkt wie ein Diagramm. Entscheide, welche Farbe führt, und lass ihr den meisten Raum. - Gleichmäßig: 0, 50, 100: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 50%, #be123c 100%)` - Gewichtet: Blau führt: `linear-gradient(180deg, #0c4a6e 0%, #0e7490 58%, #f59e0b 84%, #be123c 100%)` - Gewichtet: warm oben: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 22%, #be123c 40%, #4c0519 100%)` Eine Palette, drei Platzierungen. Die gewichteten Versionen wirken wie ein Himmel zu zwei verschiedenen Momenten; die gleichmäßige wirkt generiert. ## Farbhinweise: die Mitte verschieben Ein Farbhinweis ist ein bloßer Prozentwert zwischen zwei Stopps. Er fügt keine Farbe hinzu, sondern verschiebt den Punkt, an dem der Übergang genau zur Hälfte erreicht ist. Ein Hinweis bei 20 Prozent bedeutet, dass die Mitte früh erreicht wird: Die zweite Farbe kommt schnell und bleibt dann lange. Hinweise sind der günstigste Weg, damit ein Zwei-Farben-Verlauf weniger mechanisch wirkt. - Kein Hinweis, Mitte 50%: `linear-gradient(90deg, #4c1d95, #f9a8d4)` - Hinweis bei 25%: `linear-gradient(90deg, #4c1d95, 25%, #f9a8d4)` - Hinweis bei 75%: `linear-gradient(90deg, #4c1d95, 75%, #f9a8d4)` Dasselbe Violett zu Pink. Wenn du den Hinweis verschiebst, dominiert eine Farbe, ohne dass du eine davon änderst. ## Harte Stopps für Streifen und Bänder Teilen sich zwei Stopps eine Position, gibt es keine Strecke für einen Übergang, also wechselt die Farbe schlagartig. So entstehen Streifen, geteilte Hintergründe, Fortschrittsbalken und Flaggen nur mit einem Verlauf. Die Syntax mit doppelter Position, `Farbe Start Ende`, macht das kürzer. Wiederholende Verläufe nehmen dieselbe Idee und kacheln sie, mehr dazu unter [wiederholende lineare Verläufe](https://gradiently.design/de/guide/css-repeating-gradient). - Halb und halb: `linear-gradient(90deg, #0f172a 0 50%, #f8fafc 50% 100%)` - Drei Bänder: `linear-gradient(180deg, #fde68a 0 33%, #fb923c 33% 66%, #e11d48 66% 100%)` - Diagonale Stufen: `linear-gradient(135deg, #312e81 0 40%, #6d28d9 40% 60%, #c084fc 60% 100%)` Harte Stopps in Aktion. Kein Übergang, nur Kanten. ## Weiche Stopps: die Naht entfernen Ein linearer Übergang hat einen sichtbaren Anfang und ein sichtbares Ende. Blendest du ein dunkles Scrim über einem Foto ins Transparente aus, siehst du oft eine Linie, wo die Blende beginnt, weil die Änderungsrate von null auf volle Geschwindigkeit springt. Mehrere Zwischenstopps entlang einer Easing-Kurve lösen das: Die Farbe beginnt sich langsam zu ändern, wird schneller und kommt dann zur Ruhe. Das ist besonders nützlich für Overlays hinter Text und für [transparente Verläufe](https://gradiently.design/de/guide/css-gradient-transparent). ```css /* Linear: a visible edge where the fade starts */ .scrim-linear { background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%); } /* Eased: stops follow an ease in out curve, no edge */ .scrim-eased { background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.02) 46%, rgba(10, 12, 20, 0.08) 52%, rgba(10, 12, 20, 0.18) 58%, rgba(10, 12, 20, 0.32) 66%, rgba(10, 12, 20, 0.48) 74%, rgba(10, 12, 20, 0.62) 82%, rgba(10, 12, 20, 0.73) 91%, rgba(10, 12, 20, 0.8) 100%); } ``` Beide Scrims enden in derselben Stärke. Das weiche hat keine Linie, wo es beginnt. > **Dieselbe Idee in Bewegung** Weiche Stopps sind die Verlaufsversion einer Easing-Kurve in der Animation. [Easing](https://gradiently.design/de/guide/easing) erklärt, warum Ease-in-out natürlich wirkt, und dieselbe Logik gilt hier. ## Stopps setzen: eine praktische Methode 1. **Wähle die führende Farbe** Gib ihr 50 bis 70 Prozent der Linie. Sie bestimmt die Stimmung. 2. **Setz den Wechsel dorthin, wo das Auge hin soll** Platziere den schnellsten Farbwechsel nahe dem Blickpunkt, nicht automatisch in der Mitte. 3. **Erst Hinweise, dann Farben** Wenn ein Übergang nicht stimmt, verschiebe zuerst seine Mitte. Zusätzliche Farben machen ihn komplizierter. 4. **Prüfe die Mitten** Sieh dir die Farbe auf halbem Weg zwischen jedem Paar an. Ist sie grau, füge eine Brücke hinzu oder mische in OKLCH, wie unter [Interpolation von Farbverläufen](https://gradiently.design/de/guide/gradient-interpolation) erklärt. 5. **Lange Blenden weich machen** Für alles, was ins Transparente oder in eine Vollfarbe ausblendet, füge Zwischenstopps hinzu, damit keine Naht entsteht. ### Vermeide - Jede Farbe bekommt denselben Anteil - Für jedes Problem eine neue Farbe - Lineare Blenden ins Transparente hinter Text - Harte Stopps, wo du weiche Übergänge wolltest ### Mach - Eine führende Farbe, die anderen kommen spät - Farbhinweise, um einen Übergang zu verschieben - Weiche Stopps für Scrims und Blenden - Harte Stopps nur für Streifen und Bänder Wenn du Stopps in ihrer einfachsten Form sehen willst, führt [lineare CSS-Verläufe](https://gradiently.design/de/guide/css-linear-gradient) durch die vollständige Syntax, und [Arten von Farbverläufen](https://gradiently.design/de/guide/types-of-gradients) zeigt, wie sich Stopps in radialen und konischen Verläufen verhalten. In Gradiently regelt ein Mark Übergänge und Licht in jeder Größe selbst, sodass du sofort gestalten und die Zeit in die Wörter stecken kannst. ## FAQ ### Was ist ein Farbstopp in einem Verlauf? Ein Punkt entlang eines Verlaufs, an dem eine bestimmte Farbe erreicht wird, in CSS geschrieben als Farbe mit optionaler Position, etwa `#7c3aed 40%`. ### Was passiert, wenn ich Stopps keine Position gebe? Der Browser verteilt sie gleichmäßig von 0 bis 100 Prozent. Drei Farben landen bei 0, 50 und 100 Prozent. ### Was ist ein Farbhinweis in einem CSS-Verlauf? Ein einzelner Prozentwert zwischen zwei Stopps, etwa `#4c1d95, 25%, #f9a8d4`. Er verschiebt die Mitte des Übergangs, ohne eine Farbe hinzuzufügen. ### Wie erzeuge ich eine harte Linie in einem CSS-Verlauf? Gib zwei Stopps dieselbe Position, zum Beispiel `#0f172a 50%, #f8fafc 50%`, oder nutze die Syntax mit doppelter Position `#0f172a 0 50%, #f8fafc 50% 100%`. ### Wie blende ich einen Verlauf weich ins Transparente aus? Füge mehrere Zwischenstopps hinzu, deren Deckkraft einer Ease-in-out-Kurve folgt. Eine einfache Blende mit zwei Stopps zeigt oft eine Linie, wo sie beginnt.