CSS-Gradient-Generator: Linear & Radial

Was ist der Gradient Generator?

Der Gradient Generator ist ein browserbasierter visueller Editor für CSS-Verläufe — linear, radial und konisch — mit mehreren Farbstopps und einstellbaren Parametern. Er gibt produktionsreifes CSS aus, das direkt in jedes Stylesheet kopiert werden kann. Das Werkzeug zeigt eine Echtzeit-Vorschau des Verlaufs bei jeder Änderung, sodass kein Raten zwischen Editor und den Browser-Entwicklertools nötig ist. Designer nutzen es, um Verlaufshintergründe zu prototypisieren und präzises CSS zu erzeugen; Entwickler verwenden es, um SVG-Verlaufsdateien für skalierbare Grafiken zu exportieren.

Hauptfunktionen

• Lineare, radiale und konische Verläufe — Drei unterschiedliche Verlaufstypen, wählbar per Klick. Jeder Typ gibt die korrekte CSS-Funktion aus: linear-gradient(), radial-gradient() oder conic-gradient().
• Mehrere Farbstopps mit Positionen — Beliebig viele Stopps hinzufügen. Jeder Stopp hat eine Farbauswahl, eine Hex-Eingabe und einen Positionsregler von 0 % bis 100 %. Mindestens zwei Stopps sind erforderlich; das Tool zeigt eine Fehler-Toast-Nachricht, wenn versucht wird, die letzten beiden zu entfernen.
• Einstellbarer Verlaufswinkel — Ein Schieberegler steuert den Winkel von 0° bis 360° für lineare und konische Verlaufstypen. Der Winkel wird direkt in die CSS-Ausgabe eingebettet.
• Echtzeit-CSS-Generierung — Das CSS-Ausgabefeld aktualisiert sich sofort bei jeder Änderung. Das Ausgabeformat lautet background: linear-gradient(90deg, #8E2DE2 0%, #4A00E0 100%); — sofort einsetzbar.
• Sofortige Verlaufsvorschau — Ein 256px hohes Vorschaufeld oben im Tool rendert den Verlauf mit dem aktuellen CSS-Wert als Inline-Style.
• CSS per Klick kopieren — Der Kopieren-Button kopiert die vollständige background: ...;-Deklaration in die Zwischenablage und trägt den Eintrag in den Verlauf ein.
• Unterstützung für sich wiederholende Verläufe — Derzeit kein separates Steuerelement, aber die CSS-Ausgabe kann manuell bearbeitet werden, um linear-gradient durch repeating-linear-gradient zu ersetzen.
• Browserkompatible CSS-Ausgabe — Das generierte CSS verwendet die standardmäßige, nicht präfixierte Syntax, die alle modernen Browser unterstützen.

Verwendung des Gradient Generators

Schritt 1: Verlaufstyp wählen

Navigieren Sie zum Demnächst verfügbar: Gradient Generator. Das Tool öffnet sich mit einem standardmäßigen linearen Verlauf von #8E2DE2 (Violett) bei 0 % bis #33FFDD (helles Türkis) bei 100 %, gerendert bei 90 Grad.

Klicken Sie in der Karte Verlaufstyp auf eine der drei Schaltflächen: Linear, Radial oder Konisch. Die Vorschau aktualisiert sich sofort. Für lineare und konische Typen erscheint ein Winkelregler unterhalb der Typauswahl.

Schritt 2: Winkel einstellen (nur linear und konisch)

Ziehen Sie den Winkel-Regler zwischen 0 und 360 Grad. Der aktuelle Winkelwert wird als Beschriftung angezeigt (z. B. Winkel: 135°). 0° verläuft von oben nach unten, 90° von links nach rechts, 180° von unten nach oben und 270° von rechts nach links. Die Vorschau aktualisiert sich bei jeder Bewegung des Reglers.

Für radiale Verläufe ist das Winkelsteuerelement ausgeblendet, da radial-gradient(circle, ...) keinen Winkelparameter verwendet.

Schritt 3: Farbstopps konfigurieren

Die Karte Farbstopps listet jeden Stopp als Zeile mit folgenden Elementen:

• Eine native Farbauswahl (farbiges Quadrat) — zum Öffnen des Browser-Farbwählers klicken
• Ein Hex-Texteingabefeld mit dem aktuellen Farbwert
• Ein Positionsregler von 0 bis 100 %
• Eine Positionsprozentbeschriftung (z. B. 45 %)
• Eine Löschen-Schaltfläche (Mülleimer-Symbol)

Sowohl die Farbauswahl als auch die Hex-Eingabe aktualisieren denselben Stopp. Jede Änderung aktualisiert die Vorschau sofort.

Klicken Sie auf Stopp hinzufügen, um einen neuen Farbstopp an einer zufälligen Position mit weißer Standardfarbe einzufügen. Farbe und Position können angepasst werden.

Schritt 4: Farbstopp entfernen

Klicken Sie auf das Mülleimer-Symbol einer Stopp-Zeile, um diesen zu löschen. Wenn nur noch zwei Stopps vorhanden sind, zeigt ein Klick auf Löschen die Fehlermeldung „Mindestens 2 Farbstopps erforderlich" als Toast und behält beide Stopps.

Schritt 5: CSS-Ausgabe kopieren

Die Karte CSS-Ausgabe zeigt die vollständige Deklaration:

background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);

Klicken Sie auf CSS kopieren, um diese Zeichenfolge in die Zwischenablage zu kopieren. Eine Erfolgs-Toast-Nachricht bestätigt das Kopieren. Der Eintrag wird auch im Verlaufspanel (für Supporter-Konten) mit Verlaufstyp, Winkel und CSS-Wert protokolliert.

Schritt 6: Als SVG exportieren (Supporter-Funktion)

Klicken Sie auf die SVG-Schaltfläche (mit Download-Symbol), um den Verlauf als SVG-Datei zu exportieren. Für lineare Verläufe verwendet die SVG ein <linearGradient>-Element mit einem gradientTransform="rotate(Winkel, 0.5, 0.5)"-Attribut. Für radiale Verläufe wird <radialGradient> verwendet. Die Datei wird als gradient.svg heruntergeladen. Dies ist eine Premium-Supporter-Funktion.

Schritt 7: Zufälliger Verlauf oder Zurücksetzen

Klicken Sie auf Zufällig (rundes Pfeil-Symbol), um einen neuen Verlauf mit zwei zufälligen Farben und einem zufälligen Winkel zu generieren. Klicken Sie auf Zurücksetzen, um den Verlauf auf den Standard-Violett-zu-Türkis-Verlauf bei 90° zurückzusetzen.

Praktische Beispiele

Verlaufshintergrund für Hero-Bereich

Sie möchten einen 135°-Diagonalverlauf von #667EEA (mittleres Blau-Violett) bis #764BA2 (tiefes Lila) für einen Landing-Page-Hero. Typ auf Linear setzen, Winkelregler auf 135 ziehen, Stopp 1 auf #667EEA bei 0 % und Stopp 2 auf #764BA2 bei 100 % ändern. CSS kopieren und einfügen:

.hero {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}

Radialer Spotlight-Effekt

Sie möchten einen radialen Verlauf, der die Mitte einer Karte beleuchtet. Typ auf Radial setzen. Stopp 1 auf #FFFFFF bei 0 % ändern, einen dritten Stopp bei 50 % mit #F1F5F9 hinzufügen und Stopp 2 (jetzt Stopp 3) auf #CBD5E1 bei 100 % setzen. Die Ausgabe:

background: radial-gradient(circle, #FFFFFF 0%, #F1F5F9 50%, #CBD5E1 100%);

Als subtiler Tiefeneffekt auf weißen Kartenoberflächen verwenden.

Konisches Farbrad-Vorschau

Typ auf Konisch und Winkel auf 0° setzen. Sechs gleichmäßig verteilte Stopps hinzufügen: Rot (#FF0000) bei 0 %, Gelb (#FFFF00) bei 17 %, Grün (#00FF00) bei 33 %, Cyan (#00FFFF) bei 50 %, Blau (#0000FF) bei 67 % und Magenta (#FF00FF) bei 83 %. Der letzte Stopp schließt natürlich zum Rot zurück. Als SVG exportieren, um das Rad in einem Farbtheorie-Diagramm zu verwenden.

Tipps und Best Practices

Farbstopps werden vor der CSS-Generierung nach Position sortiert. Stopps können in beliebiger Reihenfolge hinzugefügt werden — das Tool sortiert sie immer aufsteigend, bevor die Ausgabe geschrieben wird. Das Verschieben eines 0%-Stopps über einen 50%-Stopp im Regler ordnet das CSS korrekt um.

Den Zufällig-Button für kreative Ausgangspunkte verwenden. Der Zufallsgenerator erzeugt zwei zufällige Hex-Farben und einen zufälligen Winkel. Wiederholt klicken, bis eine lohnenswerte Palette gefunden wird, dann die Farben manuell anpassen.

Einen vorhandenen Verlauf rückwärts analysieren. Das Tool unterstützt noch kein direktes Einfügen einer CSS-Verlaufszeichenfolge. Die Farbstopps können jedoch aus einem vorhandenen Verlauf extrahiert und manuell eingegeben werden.

Teilbare URLs kodieren alle Verlaufsparameter. Verlaufstyp, Winkel und Farbstopps (als kompakte Farbe:Position-Zeichenfolge) werden in die Seiten-URL serialisiert. Die URL kopieren, um die genaue Verlaufskonfiguration mit einem Teammitglied zu teilen.

Der SVG-Export verwendet eine 400×200px-Arbeitsfläche. Die exportierte gradient.svg hat width="400" height="200" und ein <rect>-Element, das die gesamte Arbeitsfläche mit dem Verlauf füllt. Da SVG auflösungsunabhängig ist, kann sie beliebig skaliert werden.

Mindestens zwei Stopps wird mit einer Toast-Nachricht durchgesetzt. Wenn versucht wird, einen Stopp zu löschen, wenn nur noch zwei vorhanden sind, lautet die Fehler-Toast: „Mindestens 2 Farbstopps erforderlich" — der Verlauf benötigt mindestens zwei Stopps, um gültiges CSS zu sein.

Häufige Probleme und Fehlerbehebung

CSS-Ausgabe zeigt background: ; (leerer Verlauf). Dies sollte bei normaler Verwendung nicht auftreten. Wenn das Farbstopps-Array leer ist (möglich nur durch URL-Zustandskorruption), gibt die Funktion generateCss eine leere Zeichenfolge zurück. Das Tool mit der Zurücksetzen-Schaltfläche zurücksetzen oder die Seite neu laden, um den Standardzustand wiederherzustellen.

Hex-Eingabe des Farbstopps zeigt nach der Eingabe die falsche Farbe. Die Hex-Eingabe ist direkt mit dem Farbwert des Stopps verknüpft. Bei Eingabe eines ungültigen Hex-Werts (z. B. #ZZZZZZ) wird die Farbauswahl nicht aktualisiert und zeigt möglicherweise die vorherige gültige Farbe. Den Hex-Wert auf einen gültigen 6-stelligen Wert korrigieren.

Positionsregler lässt sich schwer präzise einstellen. Der Regler akzeptiert Werte in 1%-Schritten. Für präzise Positionierung den Prozentsatz direkt eingeben — jedoch verwendet die aktuelle Benutzeroberfläche nur einen Regler. Nahe runde Zahlen verwenden und in der CSS-Ausgabe überprüfen.

Radialer Verlauf wirkt außermittig. Der generierte radiale Verlauf verwendet radial-gradient(circle, ...), das standardmäßig bei 50 % 50 % zentriert ist. Das Hinzufügen von circle at X% Y% ist in der Benutzeroberfläche noch nicht verfügbar. Das kopierte CSS manuell im Stylesheet bearbeiten, um den Mittelpunkt neu zu positionieren.

SVG-Export zeigt nur linear oder radial. Die SVG-Exportfunktion verarbeitet lineare Verläufe als <linearGradient> und alle anderen Typen (einschließlich konisch) als <radialGradient>. Konische Verläufe haben kein SVG-Äquivalent und fallen daher im SVG-Export auf radial zurück.

Verlaufswiederherstellung stellt den Zustand nur teilweise wieder her. Die Verlaufswiederherstellungsfunktion analysiert den Verlaufstyp und den Winkel aus dem gespeicherten Verlaufseintrag. Farbstopps werden nicht aus dem Verlauf wiederhergestellt (die Farbstopps werden stattdessen im URL-Freigabe-Zustand gespeichert). Für die vollständige Zustandswiederherstellung die Freigabe-URL verwenden.

Datenschutz und Sicherheit

Der Gradient Generator läuft vollständig im Browser. Die CSS-Generierung, Farbstopp-Verwaltung und SVG-Export-Logik sind alles reines JavaScript. Keine Verlaufskonfigurationen, Farbwerte oder Nutzungsdaten werden an einen externen Server gesendet. Der SVG-Export verwendet downloadText, um eine lokale Datei zu schreiben — kein Upload findet statt. Das Tool funktioniert vollständig offline nach dem Laden der Seite und ist sicher für die Verwendung mit proprietären oder unveröffentlichten Design-Assets.

Häufig gestellte Fragen

Ist der Gradient Generator kostenlos?

Ja. Alle Kernfunktionen — lineare, radiale und konische Verlaufserstellung, mehrere Farbstopps, Winkelsteuerung, CSS-Kopieren und Zufallsgenerierung — sind kostenlos und ohne Konto verfügbar. Die SVG-Export-Schaltfläche ist eine Premium-Supporter-Funktion, die ein Ko-fi-Supporter-Abonnement erfordert.

Funktioniert der Gradient Generator offline?

Ja. Sobald die Seite geladen ist, funktionieren alle Verlaufsgenerierung, Vorschau-Rendering und CSS-Ausgabe ohne Internetzugang. Die einzigen Online-abhängigen Funktionen sind das anfängliche Laden der Seite und die Freigabe-URL, die den Zustand in der URL selbst kodiert (kein Server-Aufruf zum Lesen des Zustands erforderlich).

Sind meine Daten beim Gradient Generator sicher?

Ja. Keine Verlaufsparameter oder Farbwerte werden an einen Server übertragen. Das Tool hat kein Backend für die Verlaufsgenerierung. Ihre Designs bleiben vollständig auf Ihrem Gerät. Die teilbare URL kodiert den Zustand in der URL-Zeichenfolge selbst — kein Server speichert sie.

Welche CSS-Verlaufstypen unterstützt das Tool?

Das Tool unterstützt drei CSS-Verlaufstypen: linear-gradient(), radial-gradient() und conic-gradient(). Die CSS-Ausgabe verwendet die standardmäßige, nicht präfixierte Syntax. Für die Browser-Unterstützung funktionieren linear-gradient und radial-gradient in allen modernen Browsern; conic-gradient erfordert Chrome 69+, Safari 12.1+ und Firefox 83+.

Wie erstelle ich einen Verlauf mit mehreren Stopps?

Klicken Sie auf Stopp hinzufügen, um zusätzliche Farbstopps einzufügen. Jeder neue Stopp erscheint an einer zufälligen Position mit Weiß als Standardfarbe. Auf das Farbfeld klicken oder einen Hex-Wert eingeben, um die Farbe zu setzen, dann den Positionsregler ziehen, um ihn zu platzieren. Es gibt keine Obergrenze für die Anzahl der Stopps.

Kann ich einen Farbstopp entfernen?

Ja. Auf das Mülleimer-Symbol einer Stopp-Zeile klicken. Wenn nur noch zwei Stopps vorhanden sind, verhindert das Tool das Entfernen und zeigt einen Toast: „Mindestens 2 Farbstopps erforderlich." Ein gültiger CSS-Verlauf benötigt mindestens zwei Farbstopps.

Was enthält die exportierte SVG-Datei?

Der SVG-Export erstellt eine 400×200px-Datei mit einem <defs>-Block, der ein <linearGradient> (für linearen Typ) oder <radialGradient> (für radiale und konische Typen) enthält, sowie ein <rect>-Element, das die gesamte Arbeitsfläche mit dem Verlauf füllt. Die Datei heißt gradient.svg und wird automatisch heruntergeladen.

Kann ich das generierte CSS in Tailwind CSS verwenden?

Ja. Den linear-gradient(...)-Wert (ohne das background:-Präfix) in die Tailwind-Konfiguration als benutzerdefiniertes Hintergrundbild einfügen:

backgroundImage: {
  'brand-gradient': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
}

Dann als bg-brand-gradient im HTML verwenden.

Unterstützt das Tool transparente Farbstopps?

Die Farbeingaben akzeptieren nur opake Hex-Werte (6-stellig). Um einen Verlauf mit Transparenz zu erstellen, die CSS-Ausgabe kopieren und die Stoppfarben manuell auf rgba()-Notation im Stylesheet ändern, zum Beispiel: linear-gradient(90deg, rgba(142, 45, 226, 0) 0%, #4A00E0 100%).

Wie teile ich einen Verlauf mit jemandem?

Die URL aus der Adressleiste des Browsers kopieren, nachdem der Verlauf konfiguriert wurde. Die URL kodiert den Verlaufstyp, den Winkel und alle Farbstoppwerte. Das Öffnen dieser URL auf einem anderen Gerät lädt genau denselben Verlauf. Die Teilen-Schaltflächen am unteren Rand der Seite können auch verwendet werden, um auf Twitter, LinkedIn, Reddit zu posten oder den Link direkt zu kopieren.

Verwandte Tools

• Demnächst verfügbar: UI Gradients — Eine kuratierte Bibliothek benannter Verläufe durchsuchen und deren CSS-Werte direkt kopieren.
• Color Picker — EyeDropper oder Formateingaben verwenden, um exakte Hex-Farben zu finden, bevor sie als Verlaufsstopps hinzugefügt werden.
• Demnächst verfügbar: Color Blender — Gleichmäßige Zwischenfarben zwischen zwei Werten generieren, nützlich zum manuellen Planen von Mehrfachstopp-Verläufen.
• Demnächst verfügbar: Palette Generator — Harmonische Farbpaletten für Verlaufsstopp-Quellen generieren.

Gradient Generator jetzt ausprobieren: Demnächst verfügbar: Glyph Widgets Gradient Generator