jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS Gradient Generator

Erstellen Sie lineare, radiale und konische CSS-Verläufe mit einer Live-Vorschau, die beim Anpassen von Farben, Positionen und Winkeln sofort aktualisiert wird. Unterstützt bis zu drei Farbstopps mit Positionsangaben in Prozent und einen optionalen Wiederholungsmodus für Muster-Verläufe. Das Tool gibt eine fertige CSS background-Property mit korrekter vendor-neutraler Syntax aus. Keine Designsoftware nötig – die visuelle Vorschau zeigt genau, wie der Verlauf aussieht, bevor Sie den Code kopieren.

Tool wird geladen...

Was ist CSS Gradient Generator?

Der CSS Gradient Generator ist ein visuelles Werkzeug zum Erstellen von CSS-Verlaufshintergründen, ohne die Syntax auswendig lernen zu müssen. Sie wählen den Verlaufstyp (linear, radial oder konisch), wählen Farben und deren Stopp-Positionen und passen den Winkel an. Eine Live-Vorschau zeigt den Verlauf in Echtzeit. Das Tool gibt eine saubere CSS background-Property aus, die Sie direkt in Ihr Stylesheet oder Inline-Style-Attribut einfügen können. Die gesamte Darstellung erfolgt in Ihrem Browser – keine Designsoftware oder Bildbearbeitung erforderlich.

Kurze Antwort

Erstellen Sie lineare, radiale und konische CSS-Verläufe visuell mit Live-Vorschau. Fügen Sie bis zu drei Farbstopps mit Positionsangaben hinzu, passen Sie den Winkel an und schalten Sie den Wiederholungsmodus ein. Kopieren Sie die fertige CSS background-Property direkt.

Last updated: 2026-06-11

Einschränkungen

  • Dieses Tool unterstützt drei Farbstopps aus Gründen der Einfachheit. Komplexe Verläufe mit vier oder mehr Stopps erfordern manuelle CSS-Bearbeitung nach dem Kopieren der Basisausgabe.
  • Radiale Verläufe werden nur in kreisförmiger Form erzeugt. Elliptische radiale Verläufe und benutzerdefinierte Formwerte (z.B. circle at top left) werden in den aktuellen Steuerelementen nicht unterstützt.
  • Das Tool generiert keine vendor-prefixten CSS (-webkit-, -moz-). Moderne Browser unterstützen unprefixte Verläufe seit 2016-2017, aber für sehr alte Browserunterstützung fügen Sie Prefixe manuell hinzu.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie den Verlaufstyp: Linear (gerade Linie), Radial (kreisförmig von der Mitte) oder Konisch (Farbrad-Drehung).
  2. Stellen Sie den Winkel zur Steuerung der Verlaufsrichtung ein. Bei linear entspricht 0deg von unten nach oben. Bei konisch bestimmt der Winkel die Startposition der ersten Farbe.
  3. Wählen Sie zwei oder drei Farben und legen Sie deren Positionsprozentsätze fest. Die Positionen bestimmen, wo jede Farbe ihren Höhepunkt erreicht – 0% am Anfang, 100% am Ende.
  4. Schalten Sie den Wiederholungsmodus für Musterausgabe ein. Kopieren Sie die CSS background-Property und fügen Sie sie in Ihr Stylesheet ein.

Wofür du es nutzen kannst

  • Gestalten Sie einen modernen Hero-Bereich-Hintergrund mit einem diagonalen Blau-zu-Lila-Verlauf bei 135 Grad.
  • Erstellen Sie einen konischen Verlauf für ein Kuchendiagramm oder ein Farbrad, das sich um einen Mittelpunkt dreht.
  • Erstellen Sie einen gestreiften Musterhintergrund mit repeating-linear-gradient und engen Farbstopp-Positionen.

Anwendungsfalle

Praxisbeispiele

Beispiel

Hero-Bereich-Hintergrund für Landingpage

Ein Frontend-Entwickler gestaltet einen Hero-Bereich für eine Landingpage. Er öffnet den CSS Gradient Generator, wählt Linear bei 135 Grad und drei Markenfarben: Blau (#3b82f6) bei 0%, Lila (#8b5cf6) bei 50% und Pink (#ec4899) bei 100%. Die Live-Vorschau zeigt den diagonalen Verlauf in Echtzeit, und er kopiert die background-Property direkt in seinen Hero-Selektor.

Beispiel

Karten-Vignettenhintergrund

Ein UI-Designer benötigt eine subtile radiale Vignette hinter einer Kartenkomponente. Er wählt den Radial-Verlauf, setzt ein helles Blau bei 0% Position (Mitte) mit Übergang zu Weiß bei 100% (Ränder). Die Vorschau zeigt einen sanften Spotlight-Effekt. Das CSS wird ohne weitere Bearbeitung in das Stylesheet des Kartencontainers kopiert.

Haufige Fehler

  • Vergessen, einen background-color-Fallback zu setzen – fügen Sie immer eine solide Hintergrundfarbe vor dem Verlauf für Browser hinzu, die Verläufe nicht unterstützen oder während das CSS lädt.
  • Verwendung von Farben mit geringem Kontrast zwischen den Stopps – die Vorschau hilft, dies zu erkennen, aber überprüfen Sie, ob der Verlauf bei der tatsächlichen Elementgröße immer noch gut aussieht.
  • Alle Stopps auf dieselbe Position setzen – dies erzeugt harte Linien statt weicher Übergänge. Platzieren Sie Stopps für allmähliche Übergänge mit Abstand oder halten Sie sie für scharfe Übergänge nahe beieinander.

Überprüfung

  1. Stellen Sie den Verlaufstyp auf Linear, Winkel auf 90deg und fügen Sie drei Stopps mit unterschiedlichen Farben hinzu. Überprüfen Sie, ob die Vorschau einen horizontalen Verlauf zeigt und die CSS-Ausgabe mit linear-gradient(90deg beginnt.
  2. Wechseln Sie zu Radial-Verlauf, setzen Sie zwei Stopps und aktivieren Sie die Verlaufswiederholung. Überprüfen Sie, ob die CSS-Ausgabe mit repeating-radial-gradient beginnt und die Vorschau sich wiederholende konzentrische Kreise zeigt.

FAQ

Fragen zu CSS Gradient Generator

Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?

Lineare Verläufe wechseln Farben entlang einer geraden Linie, die durch einen Winkel definiert wird (z.B. 135deg von oben links nach unten rechts). Radiale Verläufe breiten sich von einem Mittelpunkt kreisförmig oder elliptisch aus. Konische Verläufe rotieren um einen Mittelpunkt wie ein Farbrad, wobei der Winkel bestimmt, wo die erste Farbe beginnt.

Was bewirkt die Option zur Verlaufswiederholung?

Ein wiederholter Verlauf wiederholt das Farbstopp-Muster, anstatt das gesamte Element zu füllen. Beispielsweise erzeugt repeating-linear-gradient(90deg, red, blue 20px) abwechselnd 20px-Streifen. Verwenden Sie wiederholte Verläufe für Muster wie Streifen, Schachbrettmuster und Fortschrittsbalken.

Kann ich mehr als drei Farbstopps verwenden?

Dieses Tool unterstützt bis zu drei Farbstopps, da die meisten gängigen Web-Verläufe zwei bis drei Farben verwenden. Für komplexere Verläufe mit vier oder mehr Stopps können Sie das generierte CSS kopieren und manuell weitere Farb-Positions-Paare durch Kommas getrennt hinzufügen.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren