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.
4.9 (2.8k ratings)
Über Gradientengenerator
Erstellen Sie im Handumdrehen und kostenlos CSS-Farbverläufe. Gestalten Sie lineare und radiale Farbverläufe mit mehreren Farben. Passen Sie Winkel, Position und Farbabstände individuell an. Kopieren Sie den CSS-Code direkt. Ideal für Webdesign und UI-Entwicklung. Keine Registrierung erforderlich – funktioniert direkt im Browser.
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.