So funktioniert’s
- Wählen Sie Linear oder Radial.
- Bei linearen Verläufen stellen Sie den Winkel ein.
- Legen Sie Farbe und Position jedes Stopps fest. Farbstopp hinzufügen ergänzt Farben, bis zu fünf, Entfernen löscht sie.
- Klicken Sie auf Kopieren und fügen Sie die Regel in Ihr CSS ein.
Was das Ergebnis bedeutet
Voreingestellt ist background: linear-gradient(90deg, #ff7a18 0%, #af002d 100%);: Der Verlauf geht von Orange am linken Rand zu Dunkelrot am rechten. Jedes Paar ist eine Farbe und der Punkt, an dem sie voll erreicht ist. Zwischen zwei Stopps mischt der Browser die Farben.
Beispiel
Drei Stopps, #ff7a18 bei 0 %, #ffffff bei 50 % und #af002d bei 100 %, ergeben einen Verlauf, der in der Mitte durch Weiß geht: linear-gradient(90deg, #ff7a18 0%, #ffffff 50%, #af002d 100%).
Tipps
- Setzen Sie zwei Stopps auf dieselbe Position, um eine harte Kante statt eines Übergangs zu erhalten.
- Die Farben werden in sRGB gemischt, zwischen Komplementärfarben kann die Mitte daher gräulich wirken; ein zusätzlicher Stopp in der Mitte schafft Abhilfe.
- Prüfen Sie den Kontrast von Text auf einem Verlauf an beiden Enden.