Wohin zeigt der Winkel?

Nach CSS-Konvention: 0deg zeigt nach oben, 90deg nach rechts, weiter im Uhrzeigersinn. Das ist eine Vierteldrehung von der mathematischen Konvention entfernt — der übliche Grund, warum ein Verlauf verdreht herauskommt.

Warum wirkt mein Verlauf in der Mitte matschig?

Weil er durch die Mitte des Farbkreises läuft. Blau nach Gelb führt durch Grau, Blau nach Violett nicht. Halte die beiden Töne in Reichweite zueinander, oder wähl einen Zwischenton, den du wirklich willst, und hör dort auf.

Kann ich mehr als zwei Farben nehmen?

Auf dieser Seite nicht — sie baut die Zwei-Stopp-Deklaration, die die meisten brauchen. Die CSS-Syntax erlaubt beliebig viele Stopps, die Ausgabe ist also ein Ausgangspunkt, den du von Hand erweitern kannst.

Start›Farb-Werkzeuge› Verlaufs-GeneratorBrowser

Einen CSS-Verlauf bauen

Zwei Farben und einen Winkel wählen, das Ergebnis über die volle Breite ansehen und die CSS-Deklaration direkt ins Stylesheet kopieren.

Von

Nach

Winkel

background: linear-gradient(135deg, #2f6feb, #a855f7);

So geht’s

1Wähl Start- und Endfarbe.
2Stell den Winkel ein — 0° zeigt nach oben und dreht von dort im Uhrzeigersinn.
3Kopier die CSS-Deklaration direkt in dein Stylesheet.

Häufige Fragen

Wohin zeigt der Winkel?: Nach CSS-Konvention: 0deg zeigt nach oben, 90deg nach rechts, weiter im Uhrzeigersinn. Das ist eine Vierteldrehung von der mathematischen Konvention entfernt — der übliche Grund, warum ein Verlauf verdreht herauskommt.
Warum wirkt mein Verlauf in der Mitte matschig?: Weil er durch die Mitte des Farbkreises läuft. Blau nach Gelb führt durch Grau, Blau nach Violett nicht. Halte die beiden Töne in Reichweite zueinander, oder wähl einen Zwischenton, den du wirklich willst, und hör dort auf.
Kann ich mehr als zwei Farben nehmen?: Auf dieser Seite nicht — sie baut die Zwei-Stopp-Deklaration, die die meisten brauchen. Die CSS-Syntax erlaubt beliebig viele Stopps, die Ausgabe ist also ein Ausgangspunkt, den du von Hand erweitern kannst.