Farbverlauf-Generator — Mehrfarbige lineare, radiale und konische CSS-Verläufe (kostenlos)
Farbstopps
Mindestens 2 Farbstopps erforderlich.
CSS-Ausgabe
background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);Verwandte externe Tools
Einige Links sind Affiliate-Links.
Verwandte Tools
Dieser kostenlose CSS-Farbverlauf-Generator unterstützt drei Typen — linear, radial und konisch — mit beliebig vielen Farbstopps. Wählen Sie Farben per Farbwähler oder HEX-Eingabe und passen Sie die Positionen mit Schiebereglern für eine sofortige Großvorschau an. Steuern Sie Winkel (linear), Form/Größe/Mittelpunkt (radial) oder Startwinkel/Mittelpunkt (konisch). Kopieren Sie dann den CSS-background-Wert oder die Tailwind-Klasse mit einem Klick. Keine Installation, keine Anmeldung – alles läuft im Browser.
Anleitung
- Wählen Sie den Verlaufstyp: linear, radial oder konisch.
- Bearbeiten Sie die Farbstopps: Klicken Sie auf den Farbwähler oder geben Sie HEX ein, und passen Sie die Position per Schieberegler an (0–100%).
- Fügen Sie Stopps mit der +-Schaltfläche hinzu (bis zu 10) und entfernen Sie sie mit ×. Es bleiben immer mindestens 2 Stopps erhalten.
- Passen Sie typspezifische Einstellungen an: Winkel (linear), Form/Größe/Mittelpunkt (radial), Startwinkel/Mittelpunkt (konisch).
- Beginnen Sie mit einer Vorlage oder entdecken Sie neue Verläufe mit dem Zufalls-Button und verfeinern Sie nach Belieben.
- Kopieren Sie die CSS-Ausgabe (oder Tailwind-Klasse) mit einem Klick und fügen Sie sie in Ihr Projekt ein.
Verlaufstypen
CSS bietet drei Verlaufsfunktionen, jede mit einem anderen visuellen Effekt. Dieses Tool unterstützt alle drei.
Linearer Verlauf (linear-gradient)
Farben gehen in einer geraden Linie in eine festgelegte Richtung über, die durch einen Winkel bestimmt wird. 90° verläuft von links nach rechts, 180° von oben nach unten (gemäß CSS-Spezifikation). Dies ist der häufigste Typ, ideal für Hero-Hintergründe, Schaltflächen und Kartendekorationen.
Radialer Verlauf (radial-gradient)
Farben strahlen von einem Mittelpunkt nach außen aus. Wählen Sie zwischen Kreis und Ellipse, legen Sie ein Größen-Schlüsselwort fest und positionieren Sie den Mittelpunkt. Ideal für Spotlight- und Leuchteffekte.
Konischer Verlauf (conic-gradient)
Farben verlaufen rotierend um einen Mittelpunkt. Legen Sie den Startwinkel und die Mittelpunktposition fest. Perfekt für Farbräder und Kuchendiagramm-Effekte. conic-gradient ist eine relativ neue CSS-Funktion und wird möglicherweise in sehr alten Browsern nicht unterstützt.
Funktionen
Farbstopps: Hinzufügen, Entfernen und Positionieren
Fügen Sie bis zu 10 Stopps mit der +-Schaltfläche hinzu, entfernen Sie sie mit ×. Es bleiben immer mindestens 2 Stopps. Positionieren Sie jeden Stopp präzise mit dem Schieberegler (0–100%). Zwei Stopps an der gleichen Position ergeben einen harten Übergang (Hard Stop).
Winkel, Form und Mittelpunktposition
Beim linearen Verlauf bestimmt der Winkelschieberegler (0–360°) die Richtung. Beim radialen wählen Sie Kreis oder Ellipse, ein Größen-Schlüsselwort und X/Y-Mittelpunktpositionen. Konische Verläufe haben zusätzlich Startwinkel und Mittelpunktposition.
Farbwähler und HEX-Eingabe (mit Alpha)
Jeder Stopp hat einen nativen Farbwähler und eine HEX-Eingabe. Der Deckkraft-Schieberegler (Alpha) ermöglicht halbtransparente Stopps; die Ausgabe wechselt automatisch auf rgba(). Eine ungültige HEX-Eingabe beeinträchtigt andere Stopps und die Vorschau nicht.
Große Live-Vorschau
Ein großer Vorschaubereich oben auf der Seite zeigt den aktuellen Verlauf sofort an. Er aktualisiert sich ohne Verzögerung, egal was Sie ändern.
Sofort CSS kopieren (background, background-image oder Tailwind)
Wählen Sie das Ausgabeformat und klicken Sie auf Kopieren: vollständiges background: CSS, nur der background-image:-Wert oder die Tailwind-Klasse bg-[...]. Farben, Winkel und Prozentwerte sind immer im CSS-kompatiblen Format.
Vorlagen und Zufallsgenerierung
Klicken Sie auf eine Vorlagen-Probe, um sie sofort anzuwenden. Nutzen Sie die Zufalls-Schaltfläche, um neue Verläufe zu entdecken. Beide eignen sich als kreativer Ausgangspunkt.
Anwendungsfälle
Hero-Hintergründe, Schaltflächen und Kartendekorationen
Legen Sie einen 2–3-farbigen Verlauf für einen Hero-Bereich oder CTA-Button fest, kopieren Sie das CSS und fügen Sie es direkt in Ihr Stylesheet ein. Radiale Verläufe eignen sich auch für weiche Leuchteffekte hinter Karten.
Direkt in CSS oder Tailwind einfügen
Wählen Sie die background:-Ausgabe zur Verwendung in einer CSS-Regel. Wenn Sie Tailwind verwenden, wechseln Sie zum Tailwind-Modus, um die bg-[linear-gradient(...)]-Klasse zu kopieren und zum class-Attribut Ihres HTML-Elements hinzuzufügen.
Konische Verläufe für Farbräder und Kuchendiagramm-Effekte
Mit gleichmäßig verteilten Stopps auf einem konischen Verlauf erhalten Sie ein Farbrad oder einen kuchendiagrammartigen Hintergrund. Platzieren Sie 6 Farben bei 0%, 17%, 33%, 50%, 67% und 83%, um einen Kreis in 6 Sektoren aufzuteilen.
Nützliche Hinweise
- Winkelrichtung: 0° zeigt nach oben, 90° geht von links nach rechts, 180° von oben nach unten — gemäß CSS-Spezifikation. Überprüfen Sie immer mit der Vorschau.
- Browserkompatibilität: linear-gradient und radial-gradient werden von allen modernen Browsern unterstützt. conic-gradient ist neuer und wird in sehr alten Browsern möglicherweise nicht unterstützt.
- Ausgelassene Positionen werden gleichmäßig verteilt: Wenn ein Stopp keine Position hat, verteilt ihn der Browser automatisch zwischen benachbarten Stopps.
- Halbtransparente Verläufe: Das Verringern des Alpha-Werts erzeugt rgba()-Ausgabe und ermöglicht die Überlagerung des Verlaufs über eine Hintergrundfarbe oder ein Bild.
- Farbdaten werden nicht an einen Server gesendet. Alle Berechnungen erfolgen im Browser.
Häufig gestellte Fragen
- Kann ich neben linearen auch radiale und konische Verläufe erstellen?
- Ja. Verwenden Sie die Typauswahl oben, um zwischen linear, radial und konisch zu wechseln. Die entsprechenden Einstellungen werden angezeigt.
- Kann ich mehr als 2 Farbstopps hinzufügen?
- Ja. Klicken Sie auf die +-Schaltfläche, um Stopps hinzuzufügen (bis zu 10). Jeder Stopp hat seinen eigenen Farbwähler, HEX-Eingabe und Positionsschieberegler. Klicken Sie auf ×, um einen Stopp zu entfernen — es bleiben immer mindestens 2 erhalten.
- Kann ich Winkel und Mittelpunktposition ändern?
- Ja. Der Winkelschieberegler bestimmt die Richtung eines linearen Verlaufs (0–360°). X/Y-Schieberegler legen den Mittelpunkt radialer und konischer Verläufe fest. Radiale Verläufe haben zusätzlich Form- und Größenoptionen.
- Kann ich das generierte CSS direkt kopieren?
- Ja. Das Ausgabefeld zeigt eine vollständige CSS-Zeile (oder Tailwind-Klasse). Klicken Sie auf Kopieren und fügen Sie es in Ihr Projekt ein. Die Werte sind immer im CSS-kompatiblen Format.
- Funktioniert es mit Tailwind CSS?
- Ja. Wechseln Sie zum Tailwind-Modus, um eine bg-[...]-Klasse mit beliebigem Wert zu erhalten. Fügen Sie sie zum class-Attribut Ihres HTML-Elements hinzu.
- Kann ich halbtransparente (rgba) Verläufe erstellen?
- Ja. Reduzieren Sie den Deckkraft-Schieberegler (Alpha) eines Stopps unter 100%, um ihn halbtransparent zu machen. Die Ausgabe wechselt automatisch auf rgba() für diesen Stopp.
- Werden Farbdaten an einen Server gesendet?
- Nein. Verlaufsgenerierung, Farbanalyse und CSS-Erstellung erfolgen vollständig im Browser. Ihre Farben und das generierte CSS werden niemals übertragen oder gespeichert.