Wie verhindere ich, dass mein Verlauf in der Mitte grau aussieht?

Setz auf halber Strecke einen zusätzlichen Stopp in der Farbe, die du dort tatsächlich sehen willst. Sich selbst überlassen, läuft die Mischung durch die ausgewaschene Mitte des Farbraums, und der zusätzliche Stopp erzwingt einen besseren Weg.

Soll ich dieses Tool oder den CSS-Farbverlauf-Generator nehmen?

Dieses, wenn du eine Grafik zum Platzieren willst. Die CSS-Variante, wenn du eine Regel zum Einfügen in ein Stylesheet willst, bei der der Browser den Verlauf in der Größe zeichnet, die das Element gerade hat.

Kann ich einen Farbverlauf als PNG-Bild herunterladen?

Ja. Wähle eine Grafikgröße wie 1920 x 1080, 4K oder eine eigene Größe bis 8192 px, stell das Bildformat auf PNG und lade es herunter. Lineare und radiale Verläufe lassen sich auch als SVG speichern, und der CSS-Wert lässt sich kopieren.

Farbverlauf-Generator

Baue einen linearen, radialen oder konischen Farbverlauf aus HEX-Farbstopps und exportiere ihn als PNG oder JPG bis 8192 px oder kopiere den CSS-Wert; linear und radial auch als SVG.

Browser-Tool

Exportieren

1,920 × 1,080 px · auf deinem Gerät gerendert

Dateiname

.png / .svg

Über Farbverlauf-Generator

Baue einen Farbverlauf, indem du Farbstopps setzt und so lange verschiebst, bis er stimmt, und nimm das Ergebnis dann als fertige Grafik mit. Willst du statt eines Bildes die CSS-Regel, liefert der CSS-Farbverlauf-Generator denselben Verlauf als Stylesheet-Deklaration. Das Erstellen ist kostenlos und läuft komplett online. Kein Konto, keine Anmeldung und kein Wasserzeichen quer über dem Ergebnis – und da der Verlauf in deinem Browser gezeichnet wird, wird nichts hochgeladen.

So nutzt du Farbverlauf-Generator

Farbstopps hinzufügen und platzierenFür das meiste reichen zwei. Ein Stopp legt eine Farbe an einer Stelle der Achse fest, und wenn du ihn verschiebst, wird die Vorschau beim Ziehen neu gezeichnet.
Linear oder radial wählenLinear verläuft entlang eines Winkels, den du festlegst; radial breitet sich von einem Mittelpunkt aus. Dieselben Stopps verhalten sich in beiden Varianten ganz unterschiedlich, es lohnt sich also, beide auszuprobieren.
ExportierenNimm den Verlauf in der Form mit, die du für die Fläche brauchst, auf der er landen soll.

Warum ein Verlauf mit zwei Stopps trüb aussehen kann

Wird direkt zwischen zwei gesättigten Farben interpoliert, führt der Weg durch die entsättigte Mitte des Farbraums, und dort wohnt das Grau. Von Blau nach Gelb geht es durch ein stumpfes Grün statt durch ein leuchtendes. Ein dritter Stopp in der Mitte, in der Farbe, die du dort wirklich sehen willst, ist die übliche Lösung.

Was das Tool nicht kann

Bei großen, feinen Verläufen tritt Banding auf, besonders auf Bildschirmen mit begrenzter Farbtiefe. Mehr Stopps helfen nicht; ein wenig Rauschen darüber schon.
Ein Farbverlauf ersetzt kein Bild. Alles mit Details gehört in eine Bilddatei.