So funktioniert dieses Werkzeug
Die drei Verlaufsfunktionen unterscheiden sich darin, wie sie zwischen Farben wandern. Ein linearer Verlauf läuft entlang einer Geraden im angegebenen Winkel, wobei 0deg nach oben zeigt und die Werte im Uhrzeigersinn steigen. Ein radialer Verlauf breitet sich von einem Punkt nach außen aus. Ein konischer Verlauf streicht um einen Punkt wie ein Uhrzeiger, weshalb er für Tortendiagramme und Farbkreise verwendet wird und nicht für Hintergründe.
Jeder Farbstopp trägt eine Position als Prozentwert entlang dieses Wegs. Die Stopps werden vor der Ausgabe sortiert, denn ein Stopp in falscher Reihenfolge ist gültiges CSS, erzeugt aber eine harte Kante statt eines Übergangs und wirkt dadurch wie ein Fehler statt wie eine Entscheidung. Zwei Stopps an derselben Position ergeben eine bewusste harte Kante — so entstehen Streifen. Der Winkelregler wird bei radialen Verläufen zu einer Mittelpunktsangabe, denn für eine Form, die sich in alle Richtungen ausbreitet, bedeutet ein Winkel nichts.
Einen Übergang bekommen, der stimmt
- Verläufe zwischen Komplementärfarben laufen durch Grau: Die Interpolation führt durch den Farbraum zwischen Ihren beiden Stopps, und gegenüberliegende Farbtöne treffen sich in einer entsättigten Mitte. Ein dritter Stopp, der den Weg umlenkt, ist die übliche Abhilfe.
- Die Stopp-Positionen sind, wo die Farbe rein ist: Der Übergang liegt dazwischen. Zwei Stopps bei 40% und 60% ergeben an beiden Enden eine volle Fläche und einen Übergang nur im mittleren Fünftel.
- Ein Verlauf ist ein Bild, keine Farbe: Er gehört in background oder background-image und funktioniert nirgends, wo eine einfache Farbe erwartet wird, etwa bei border-color.
- Bei dezenten Verläufen zeigt sich Banding: Ein langsamer Übergang über eine große Fläche stuft auf 8-Bit-Displays sichtbar. Mehr Kontrast zwischen den Stopps, eine kleinere Fläche oder eine feine Rauschebene verringern es.