Gradientengenerator
Farbverlaufstyp
Einstellungen
Farbstopps
Voreinstellungen
Vorschau
CSS-Code
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
Teilen Sie es uns mit.
Bitte teilen Sie Ihre Erfahrungen mit.
Ähnliche Tools
135 Grad bedeutet oben links nach unten rechts
Die Winkelkonvention verwirrt einmal alle: In CSS zeigt 0deg nach oben, die Grade laufen im Uhrzeigersinn — deshalb fließt der Arbeitstier-Verlauf 135deg von der oberen linken zur unteren rechten Ecke — deshalb nutzt fast jeder diagonale Hero-Hintergrund diesen Wert. Jeder Farbstop trägt eine Position von 0-100 %: Die beiden Stops eines Blau-Violett-Verlaufs zusammenrücken (etwa 20 % und 80 %) erzeugt ein sanftes Band, während ein Stop bei 0 % eine Farbe hart am Rand beginnen lässt. Die Zufalls-Taste springt zwischen ganzen Paletten, wenn man einen Startpunkt zum Verfeinern sucht statt einer leeren Seite.
Verlaufsbanding, harte Stops und Dark-Mode-Zwillinge
Drei Qualitätsprobleme trennen einen Amateurverlauf von einem für die Produktion. Subtile Verläufe auf großen Flächen können Banding erzeugen — sichtbare Konturlinien — besonders auf Displays mit geringer Bittiefe; den Abstand zwischen den Stops zu verbreitern oder die beiden Farbtöne leicht auseinanderzurücken versteckt es meist. Zwei verschiedene Farben an derselben Position schaffen einen harten Stop — so macht man Streifen, keine Überblendungen. Und ein Verlauf, der für eine helle Seite abgestimmt ist, wirkt auf einer dunklen oft matschig: Der Dark Mode braucht sein eigenes Paar, typischerweise mit luminöseren Mitteltönen, als separate Variante gesichert.
Über Gradientengenerator
Verläufe sind der Standardhintergrund des modernen Webs geworden — Hero-Banner, Aktions-Buttons, Ladeschirme, Kartenköpfe — und jeder ist eine CSS-Zeile, die Farben, ihre Stopppositionen und eine Richtung festlegt. Diese Zeile von Hand zu schreiben ist möglich; sie mit dem Auge zu iterieren ist schneller. Der Generator existiert für die Iteration: Stops verschieben, zwischen linear und radial wechseln, das fertige CSS direkt aus dem Werkzeug lesen.
Anleitung zur Verwendung
Schritt 1
Wählen Sie den Verlaufstyp: Linear, Radial oder Kegelförmig
Schritt 2
Farbstopps hinzufügen und anpassen (mindestens 2 Farben)
Schritt 3
Typenspezifische Einstellungen anpassen (Winkel, Form, Position)
Schritt 4
Sehen Sie sich Ihren Farbverlauf in Echtzeit an.
Schritt 5
Nutzen Sie Voreinstellungen für schnelle Inspiration oder generieren Sie zufällige Farbverläufe.
Schritt 6
Kopieren Sie den CSS-Code, um ihn in Ihren Projekten zu verwenden.
Funktionen und Vorteile
- ✅3 Gradiententypen: Linear, Radial und Kegelschnitt
- ✅Unbegrenzte Farbstopps mit Positionssteuerung
- ✅Vollständige Anpassungsmöglichkeiten: Farben, Winkel, Formen, Positionen
- ✅8 wunderschöne Voreinstellungen: Sonnenuntergang, Ozean, Wald, Lila Traum, Feuer, Kühle Blautöne, Regenbogen, Pfirsich
- ✅Zufallsgradientengenerator zur Inspiration
- ✅Echtzeit-Vorschau während der Anpassung
- ✅CSS-Code mit einem Klick in die Zwischenablage kopieren
- ✅Ziehen Sie die Schieberegler, um die Farbpositionen anzupassen.
- ✅100 % kostenlos – keine Wasserzeichen, keine Anmeldung erforderlich
- ✅Funktioniert offline – die gesamte Generierung findet in Ihrem Browser statt.
Häufig gestellte Fragen
Welche Gradiententypen werden unterstützt?
Wir unterstützen 3 CSS-Gradiententypen: Linear (geradlinige Farbverläufe mit einstellbarem Winkel von 0-360°), Radial (kreisförmige oder elliptische Farbverläufe von einem Mittelpunkt aus) und Conic (kreisförmige Farbverläufe, die sich um einen Mittelpunkt drehen, ideal für Tortendiagramme und Farbräder).
Wie füge ich meinem Farbverlauf weitere Farben hinzu?
Klicken Sie im Bereich „Farbstopps“ auf die Schaltfläche „+“, um eine neue Farbe hinzuzufügen. Sie können beliebig viele Farben hinzufügen. Jeder Farbstopp verfügt über einen Positionsregler (0–100 %), mit dem Sie seine Position im Farbverlauf festlegen können. Um eine Farbe zu entfernen, klicken Sie auf das Papierkorbsymbol (mindestens zwei Farben erforderlich).
Worin besteht der Unterschied zwischen den verschiedenen Gradiententypen?
Lineare Farbverläufe lassen Farben geradlinig in einem festgelegten Winkel ineinander übergehen. Radiale Farbverläufe verlaufen von einem Mittelpunkt aus kreisförmig oder elliptisch nach außen. Konische Farbverläufe rotieren die Farben um einen Mittelpunkt wie in einem Farbkreis und eignen sich für Tortendiagramme und kreisförmige Designs.
Wie verwende ich den generierten CSS-Code?
Klicken Sie auf die Schaltfläche „Kopieren“, um den CSS-Code in Ihre Zwischenablage zu kopieren. Fügen Sie ihn anschließend in Ihre CSS-Datei oder Ihr Style-Attribut ein. Der Code enthält die vollständige Hintergrund-Eigenschaft, zum Beispiel: `background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);`
Kann ich meine Farbverläufe speichern?
Das Tool speichert keine Farbverläufe, aber Sie können den CSS-Code kopieren und in Ihren Projektdateien speichern. Sie können auch bestimmte Farbverlaufskonfigurationen als Lesezeichen speichern, indem Sie den CSS-Code in einer Textdatei oder einem Designsystem ablegen.
Welche voreingestellten Farbverläufe gibt es?
Wir bieten 8 professionell gestaltete Farbverlaufsvoreinstellungen: Sonnenuntergang (warmes Rot zu Gelb), Ozean (tiefblau zu Cyan), Wald (türkis zu Grün), Lila Traum (Lila zu Rosa), Feuer (radialer Gelb-Rot-Verlauf), Kühle Blautöne (blauer Farbverlauf), Regenbogen (konischer Vollspektrum-Verlauf) und Pfirsich (zarte Pfirsichtöne). Klicken Sie auf eine Voreinstellung, um sie sofort anzuwenden.
Wie funktioniert der Zufallsgradientengenerator?
Klicken Sie auf die Schaltfläche „Zufälliger Farbverlauf“, um einen völlig zufälligen Farbverlauf mit 2–4 Farbstopps, zufälligen Farben und einem zufälligen Verlaufstyp zu erzeugen. Ideal, um Inspiration zu finden oder unerwartete Farbkombinationen zu entdecken.
Kann ich die Position jeder Farbe anpassen?
Ja! Jeder Farbstopp verfügt über einen Positionsregler (0–100 %), mit dem Sie die Position der Farbe im Farbverlauf festlegen können. Ziehen Sie den Regler oder geben Sie einen Wert ein, um die Farbübergänge feinabzustimmen. Farben, die näher beieinander liegen, erzeugen schärfere Übergänge, während weiter voneinander entfernte Farben weichere Übergänge ermöglichen.