01
Winkel und Mittelpunkt unterscheiden
Linear: 0 Grad zeigt nach oben, 90 nach rechts. Konisch verwendet einen eigenen Startwinkel; radial verwendet stattdessen Kreis oder Ellipse und einen Mittelpunkt.
HTML- und CSS-Tools
CSS-Farbverlauf-Generatormit Live-Vorschau
Farben und Stopppositionen ändern; Vorschau und kopierbares CSS werden gemeinsam aktualisiert.
CSS-Farbverlauf-Generator
Farbstopps
Stopp 1
Stopp 2
CSS-Deklaration
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);Farben und CSS bleiben in diesem Browser-Tab und werden nicht hochgeladen.
Verlaufseinstellungen
CSS ist bereit zum Kopieren.
Bei drei oder mehr Farben ist der Verlauf im Quelltext schwer abzuschätzen. Der CSS-Farbverlauf-Generator zeigt, ob zwei Stopps weich ineinanderlaufen oder an derselben Position eine harte Kante bilden. Auch als CSS Verlaufsgenerator nutzbar.
Für Hero-Bereiche, Schaltflächen und kreisförmige Akzente behält der CSS-Farbverlauf-Generator die Farbwerte beim Wechsel zwischen linear, radial und konisch bei.
Warum diesen CSS-Farbverlauf-Generator verwenden?
Dieselbe Palette in drei Geometrien vergleichen und Stopps exakt setzen.
Eine Palette, drei Formen
Der CSS-Farbverlauf-Generator übernimmt Farben und Prozentpositionen beim Typwechsel. Winkel, Kreisform und Mittelpunkt werden nur dort eingeblendet, wo sie den Verlauf wirklich beeinflussen.
Kein veraltetes CSS kopieren
Nach jeder Eingabe werden Vorschau und Deklaration neu erzeugt. Ein ungültiger HEX-Wert markiert das bisherige Ergebnis als veraltet und sperrt Kopieren.
Drei Einstellungen, die das Ergebnis ändern
02
Farbstopps gezielt platzieren
Ziehen Sie einen Griff oder geben Sie Prozentwerte ein. Treffen zwei Farben am selben Prozentpunkt aufeinander, entsteht eine klare Kante.
03
Nur aktuelle Ergebnisse übernehmen
Die automatische Erzeugung ist zunächst aktiv. Nach dem Ausschalten lassen sich mehrere Werte ändern und mit Strg/Cmd+Enter gemeinsam berechnen; bis dahin ist Kopieren gesperrt.
Form, Farbstopps und Ausgabe im Blick
Linear, radial und konisch
Erstellen Sie gerichtete Flächen oder einen umlaufenden Farbring. Ein radialer Farbverlauf wächst dagegen vom Mittelpunkt nach außen.
Zwei bis acht Farbstopps
Jeder Stopp besitzt einen sechsstelligen HEX-Wert, Deckkraft und Position; der Griff kann direkt bewegt werden.
Standard-CSS zum Einfügen
Kopieren Sie eine background-image-Deklaration passend zur Vorschau; Transparenz wird als rgba() ausgegeben.
Eingabegrenzen und bewusste Auslassungen
- Mindestens zwei, höchstens acht Stopps
- Die letzten beiden Stopps bleiben erhalten. Eine Löschung zeigt erst eine Vorschau, verlangt Bestätigung und kann einmal rückgängig gemacht werden.
- Nur sechsstellige HEX-Farben
- Farbe und Deckkraft sind getrennte Eingaben. Ungültige Werte sperren Kopieren; HSL- oder Namensfarben werden hier nicht umgewandelt.
- Nur eine Verlaufsebene
- Der CSS-Farbverlauf-Generator erzeugt eine normale background-image-Deklaration. Er importiert keine Bilder oder CSS, stapelt keine Ebenen und liefert weder PNG noch Tailwind-Code.
- Lesbarkeit von Text separat prüfen
- Helle und dunkle Bereiche können nebeneinanderliegen. Die Vorschau ersetzt keine Kontrastprüfung an der konkreten Textposition.
Fragen zum CSS-Farbverlauf-Generator
Wie erstelle ich einen linearen CSS-Farbverlauf?
Wählen Sie Linear und stellen Sie Winkel und Farbstopps ein. Der CSS-Farbverlauf-Generator zeigt sofort das Ergebnis und liefert die passende background-image-Deklaration.
Was unterscheidet lineare, radiale und konische Verläufe?
Linear mischt entlang einer Richtung, radial vom Mittelpunkt nach außen und konisch um einen Mittelpunkt herum. Die gleiche Palette bleibt beim Umschalten erhalten.
Wie füge ich weitere Farbstopps hinzu?
Mit „Stopp hinzufügen“ erscheint eine neue Farbe in der größten Lücke. Danach können Sie den Griff verschieben oder einen exakten Prozentwert eingeben.
Warum zeigt der Verlauf nur eine Farbe?
Prüfen Sie, ob mindestens zwei Stopps unterschiedliche Farben und Positionen haben. Zwei gleiche Positionen erzeugen statt einer weichen Mischung eine scharfe Kante.
Kann ich den erzeugten CSS-Code direkt verwenden?
Ja. Kopieren Sie die vollständige background-image-Zeile in Ihre CSS-Regel. Eine Bilddatei ist nicht erforderlich.
Ein Sonderfall fehlt?
Jetzt mit dem CSS-Farbverlauf-Generator gestalten
Farbstopps und Form anpassen, Vorschau prüfen und anschließend die CSS-Deklaration kopieren.