So verwenden Sie es
- Wählen Sie eine Verlaufsart: eine Linie, auf der sich die Farbe ändert (linear), eine Ausbreitung vom Mittelpunkt (radial) oder eine Drehung um einen Punkt (konisch).
- Stellen Sie den Winkel für einen linearen oder konischen Verlauf ein. Bei einem radialen Verlauf gilt er nicht.
- Wählen Sie unter Farbstopps jede Farbe und geben Sie ihre Position in Prozent an. Fügen Sie Stopps hinzu oder entfernen Sie sie, bis Sie zwei bis sechs haben.
- Drücken Sie unter CSS auf Kopieren und fügen Sie die Zeile in Ihr Stylesheet ein, oder beginnen Sie mit einer der Vorlagen.
Die drei Verlaufsarten
- Linear: Die Farbe ändert sich entlang einer geraden Linie. Ein Winkel von 0deg zeigt nach oben, und der Winkel dreht sich im Uhrzeigersinn. So verläuft 90deg von links nach rechts und 180deg von oben nach unten.
- Radial: Die Farben breiten sich vom Mittelpunkt in einem Kreis aus, vom ersten Stopp bis zum letzten.
- Konisch: Die Farben drehen sich um den Mittelpunkt, wie die Zeiger einer Uhr. Der Winkel legt fest, wo die erste Farbe beginnt.
Farbstopps und ihre Positionen
Ein Farbstopp ist eine Farbe an einer Position von 0 % bis 100 % entlang des Verlaufs. Der Editor schreibt die Stopps in der Reihenfolge ihrer Positionen, daher ändert die Reihenfolge der Eingabe das Bild nicht. Zwei bis sechs Stopps halten den Verlauf leicht lesbar und das CSS kurz.
Der Code ist die übliche CSS-Syntax, die aktuelle Browser lesen. Die Vorschau zeichnet Ihr Browser aus demselben Wert, daher sehen Sie genau das, was das Stylesheet erhält.
Rechenbeispiel: die Vorlage Sonnenaufgang
Die Vorlage Sonnenaufgang ist ein linearer Verlauf mit 135deg, der von oben links nach unten rechts läuft. Sie hat drei Stopps: Orange bei 0 %, Gelb bei 50 % und Pink bei 100 %.
Das CSS dazu lautet: background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #ec4899 100%);
Häufig gestellte Fragen
Was bedeutet 0deg bei einem linearen Verlauf?
0deg zeigt nach oben. Mit diesem Winkel ändern sich die Farben von unten nach oben. Der Winkel dreht sich im Uhrzeigersinn: 90deg verläuft von links nach rechts, 180deg von oben nach unten.
Warum stehen meine Stopps im Code in einer anderen Reihenfolge?
Der Code schreibt die Stopps in der Reihenfolge ihrer Positionen, weil CSS sie in dieser Reihenfolge liest. Geben Sie 80 % vor 20 % ein, zeigt der Code zuerst 20 %, und das Bild bleibt gleich.
Kann ich eine transparente Farbe verwenden?
Dieser Editor nimmt volldeckende Farben als Hexadezimalwert an. Für Transparenz bearbeiten Sie den Code von Hand und verwenden eine Farbe mit einem Alpha-Wert.
Wie viele Farbstopps kann ich verwenden?
Zwei bis sechs. Der Editor hält die Anzahl in diesem Bereich, daher hat der Verlauf immer einen Anfang und ein Ende.
Funktioniert der Code in jedem Browser?
Die Syntax ist die Standardform, die aktuelle Browser unterstützen. Prüfen Sie das Ergebnis in den Browsern Ihrer Besucher, besonders wenn Sie ältere Versionen unterstützen müssen.
Wird mein Entwurf irgendwohin gesendet?
Nein. Der Verlauf entsteht in Ihrem Browser. Nichts wird gespeichert oder an einen Server gesendet.
Kann ich einen Verlauf als Textfarbe verwenden?
Der Rechner schreibt nur die Deklaration für den Hintergrund. Einen Verlauf hinter einen Text zu legen ist möglich, braucht aber mehr CSS, als der Rechner schreibt.
Quellen
- MDN (englisch): linear-gradient(), Winkel und Syntax der Farbstopps
- MDN (englisch): radial-gradient(), Endform und Position
- MDN (englisch): conic-gradient(), Startwinkel und Positionen der Stopps
Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.