Die Kurzfassung
- 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.
Auf dieser Seite
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() dokumentiert.
#1e3a8a, #f472b6Was passiert
#1e3a8a 20%, #f472b6 80%Was passiert
#1e3a8a, 30%, #f472b6Was passiert
#1e3a8a 50%, #f472b6 50%Was passiert
#1e3a8a 0 40%, #f472b6 40% 100%Was passiert
#1e3a8a 10px, #f472b6 200pxWas passiert
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.
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.
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.
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.
/* 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%);
}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 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 durch die vollständige Syntax, und Arten von Farbverläufen 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.
Häufige Fragen
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.
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