Ein CSS-Gradient sind zwei oder mehr Farben und eine Richtung, und der Browser füllt alles dazwischen. Das Füllen ist der interessante Teil, denn die voreingestellte Art, wie Browser Farbe interpolieren, ist der Grund, warum so viele Verläufe trüber aussehen als die Farben, die hineingingen.
CSS-Winkel sind keine Mathe-Winkel
Das bringt jeden aus dem Tritt, der je Trigonometrie gemacht hat. In der Mathematik zeigt 0 Grad nach rechts und Winkel wachsen gegen den Uhrzeigersinn. Bei CSS-Verläufen zeigt 0deg nach oben und Winkel wachsen im Uhrzeigersinn. Die beiden Konventionen sind um 90 Grad gegeneinander gedreht und laufen in entgegengesetzte Richtungen.
90deg ist also nach rechts, 180deg nach unten, 270deg nach links. Kommt ein Verlauf gedreht heraus, ist das fast immer der Grund — und die Abhilfe ist nicht, an der Zahl zu drehen, bis es passt, sondern zu wissen, dass CSS oben beginnt und sich dreht wie eine Uhr.
Die Schlüsselwortsyntax existiert, um das Ganze zu umgehen: to right, to bottom left. Sie liest sich besser als eine Zahl und lässt sich mit nichts verwechseln, was sie zur besseren Wahl macht, wann immer die Richtung eine der acht offensichtlichen ist.
Die trübe Mitte, und woher sie kommt
Setz ein gesättigtes Blau und ein gesättigtes Gelb in einen Verlauf und schau, was in der Mitte passiert: Es wird grau. Keine angenehme Übergangsfarbe — ein totes, ausgewaschenes Band, das keine der beiden Farben hätte vermuten lassen.
Die Ursache ist dieselbe, die #808080 nicht halb so hell wie Weiß macht. Standardmäßig interpolieren Browser Verläufe in sRGB, und sRGB-Zahlen sind keine Lichtmengen — sie sind wahrnehmungskodiert. Sie zu mitteln ist Arithmetik auf der falschen Skala und landet dunkler und flauer, als das Auge erwartet. Der Mittelpunkt zweier lebhafter Farben kommt ausgelaugt heraus.
CSS lässt dich inzwischen sagen, wo interpoliert wird. linear-gradient(in oklch, blue, yellow) weist den Browser an, in einem Wahrnehmungsraum zu mischen, und das trübe Band erscheint schlicht nicht — der Übergang bleibt durchgehend lebhaft. Jeder aktuelle Browser unterstützt es, und es ist die einzelne Änderung, die einen Verlauf aus gesättigten Farben am meisten verbessert. Dieses Tool erzeugt die Standardsyntax; "in oklch" nach dem Winkel zu ergänzen ist eine Handänderung, die sich lohnt.
Banding ist Arithmetik, kein Rendering-Fehler
Subtile Verläufe zeigen Streifen. Ein sanfter Verlauf über einen Hero-Bereich zeigt sichtbare Bänder, und kein Justieren der Farben behebt es. Der Grund: Acht Bit pro Kanal geben 256 Werte, und ein Verlauf kann nur die Werte nutzen, die zwischen seinen Endpunkten existieren.
Miss es nach, und es ist eindeutig. Ein Verlauf von #404040 nach #484848 hat acht Stufen Unterschied zur Verfügung, und ihn über tausend Pixel zu ziehen erzeugt neun unterscheidbare Töne — neun Stufen, jede über hundert Pixel breit. Das sind die Bänder. Es gibt keine fehlende Präzision zurückzuholen; die Farben liegen einfach so nah beieinander.
Die Lösungen sind allesamt Behelfe. Leg eine schwache Rauschtextur darüber, die die flachen Bereiche in Dithering zerlegt und die Grenze verbirgt. Nimm einen größeren Farbunterschied über dieselbe Strecke. Oder nimm es hin, denn Banding fällt auf einer belebten Seite weit weniger auf als auf einer leeren. Was nicht hilft, ist den Browser zu bitten, sich mehr anzustrengen — er ist bereits an der Grenze dessen, was das Format ausdrücken kann.
Die Transparenzfalle
Eine Farbe ins Nichts auslaufen zu lassen schreibt man als Verlauf von dieser Farbe nach transparent — und in Safari wurde die Mitte früher grau, weil transparent als rgba(0,0,0,0) gedeutet wurde, ein voll transparentes Schwarz, und das Mischen dorthin alles unterwegs durch unsichtbares Schwarz zog.
Moderne Browser interpolieren in vormultipliziertem Alpha, was es behebt. Die beibehaltenswerte Gewohnheit ist aber, den Endpunkt ausdrücklich hinzuschreiben: rgba(255,0,0,1) nach rgba(255,0,0,0) sagt, was gemeint ist, kann von nichts missverstanden werden und verlässt sich nicht darauf, dass der Browser mit einem Schlüsselwort das Richtige tut.
Häufige Fragen
Wird irgendetwas an einen Server geschickt?
Nein. Dieses Tool ist als "client" gekennzeichnet: Die Vorschau ist dein eigener Browser, der das CSS rendert, und die Regel wird aus deinen Eingaben in der Seite zusammengesetzt. Es wird nichts übertragen.
Warum sieht die Mitte meines Verlaufs grau aus?
sRGB-Interpolation, siehe oben. Die beiden Farben werden auf einer wahrnehmungskodierten statt linearen Skala gemittelt, was den Mittelpunkt dunkler und flauer ausfallen lässt als erwartet. Ergänze "in oklch" nach dem Winkel, und es verschwindet — der Browser mischt dann in einem Raum, der genau dafür gemacht ist.
Wie werde ich die Streifen in einem subtilen Verlauf los?
Gar nicht, jedenfalls nicht direkt — sie kommen daher, dass es nur 256 Stufen pro Kanal gibt und ein subtiler Verlauf sehr wenige davon nutzt. Die praktische Antwort ist eine schwache Rauschauflage, die die Grenzen ins Unsichtbare dithert. Derselbe Trick, den der Druck seit einem Jahrhundert nutzt — und der Grund, warum so viele "weiche" Verläufe auf gut gemachten Seiten eine kaum wahrnehmbare Körnung tragen.
Linear oder radial?
Linear für alles, was sich als Fläche liest — ein Hintergrund, ein Button, ein Abschnitt. Radial für alles, was sich als Lichtquelle oder Blickfang liest, denn genau so sieht ein radialer Verlauf physisch aus. Bist du unsicher, ist es linear: Radiale Verläufe ziehen die Aufmerksamkeit auf ihre Mitte, und wenn dort nichts Beachtenswertes ist, stellt der Verlauf eine Frage, die das Design nicht beantwortet.
Schaden Verläufe der Performance?
Nicht nennenswert. Ein CSS-Verlauf wird einmal gemalt und kostet weniger als das Bild, das du sonst geladen hättest — es sind Bytes, die du nicht heruntergeladen hast. Teuer wird es bei Animation: Verlauf-Stops zu animieren erzwingt ein Neuzeichnen pro Bild. Brauchst du einen bewegten Verlauf, animiere stattdessen die transform eines übergroßen Verlaufselements und lass den Compositor die Arbeit machen.