CSS-Farbverlauf-Generator

Q: Wie übernehme ich den Verlauf in mein Projekt?

Kopiere die Zeile aus dem Feld „CSS“ – sie beginnt mit background: – und füge sie in die CSS-Regel des gewünschten Elements ein, zum Beispiel für einen Button oder den Seitenhintergrund.

Der CSS-Farbverlauf-Generator erzeugt aus zwei Farben einen Farbverlauf (Gradient) für CSS – wahlweise linear in einem einstellbaren Winkel oder radial von der Mitte nach außen. Du wählst Farbe 1 und Farbe 2 sowie den Typ des Verlaufs, direkt darunter erscheinen die Vorschau als Farbfläche und der passende CSS-Code zum Kopieren. Praktisch für Hintergründe, Buttons oder Header-Bereiche, ohne den Verlauf von Hand zu schreiben.

So funktioniert der CSS-Farbverlauf-Generator

Wähle zwei Farben über die Felder Farbe 1 und Farbe 2 sowie den Typ des Verlaufs: linear oder radial. Bei einem linearen Verlauf legst du zusätzlich über den Regler Winkel fest, in welche Richtung die Farbe verläuft – einstellbar von 0° bis 360° in Schritten von 5°.

Die Vorschau darunter aktualisiert sich sofort bei jeder Änderung. Direkt darunter erscheint der fertige CSS-Code, den du per Klick auf „Kopieren“ in dein Stylesheet übernimmst.

So wird der CSS-Code erzeugt

Bei einem linearen Verlauf übernimmt der Generator den eingestellten Winkel direkt als Richtungsangabe in Grad. Dabei gilt die CSS-Konvention: 0° zeigt nach oben, 90° nach rechts, 180° nach unten und 270° nach links, jeweils im Uhrzeigersinn dazwischen. Farbe 1 startet am Anfang dieser gedachten Linie, Farbe 2 an ihrem Ende.

Beim radialen Verlauf spielt der Winkel keine Rolle: Es entsteht immer ein Kreis (circle), der sich von der Mitte aus gleichmäßig nach außen ausbreitet – Farbe 1 im Zentrum, Farbe 2 am Rand.

Beispiel

Mit den Standardwerten Farbe 1 = #2f6df6 (Blau), Farbe 2 = #16b981 (Grün), Typ linear und Winkel 90° liefert der Generator: background: linear-gradient(90deg, #2f6df6, #16b981);. Weil 90° in CSS „nach rechts“ bedeutet, verläuft die Fläche von Blau links zu Grün rechts.

Stellst du den Typ auf radial um, wird daraus background: radial-gradient(circle, #2f6df6, #16b981); – unabhängig vom Winkel-Regler startet Blau jetzt als Kreis in der Mitte und geht zum Rand hin in Grün über.

Wofür brauche ich das?

Ein linearer Verlauf eignet sich für gerade Flächen wie Hintergründe von Sections, Karten oder Buttons, bei denen die Farbe gleichmäßig in eine Richtung übergehen soll. Ein radialer Verlauf passt eher zu runden Elementen, Spotlight- oder Glow-Effekten sowie Badges, weil die Farbe von einem Mittelpunkt nach außen abklingt.

Da der erzeugte Code eine einzige CSS-Zeile ist, fügst du ihn direkt in die background-Eigenschaft eines beliebigen Elements in deinem Stylesheet ein – ganz ohne zusätzliches Markup.

Häufige Fragen

Werden meine Eingaben gespeichert?

Nein. Der Verlauf wird vollständig lokal in deinem Browser berechnet, es werden keine Farben oder Einstellungen an einen Server übertragen.

Warum ändert der Winkel-Regler beim radialen Verlauf nichts?

Weil ein radialer Verlauf hier immer als Kreis erzeugt wird, der sich von der Mitte aus gleichmäßig in alle Richtungen ausbreitet. Eine Richtung im Sinne eines Winkels gibt es dabei nicht, deshalb wirkt der Regler nur beim linearen Verlauf.

Was bedeutet der Winkel bei einem linearen Verlauf?

Er legt die Richtung des Verlaufs fest: 0° zeigt nach oben, 90° nach rechts, 180° nach unten und 270° nach links, jeweils im Uhrzeigersinn dazwischen.

Kann ich mehr als zwei Farben für den Verlauf verwenden?

Nein, der Generator arbeitet mit genau zwei Farben, Farbe 1 und Farbe 2. Für weitere Farbstopps müsstest du den erzeugten CSS-Code von Hand um zusätzliche Farbwerte ergänzen.

Wie übernehme ich den Verlauf in mein Projekt?

Kopiere die Zeile aus dem Feld „CSS“ – sie beginnt mit background: – und füge sie in die CSS-Regel des gewünschten Elements ein, zum Beispiel für einen Button oder den Seitenhintergrund.