Selbststarter

CSS Gradient Generator

Farbverläufe visuell erstellen – Linear, Radial und Conic Gradients mit Live-Vorschau und CSS-Code.

Gradient-Typ

90°

Color-Stops

2 / 5
0%
100%

Fertige Presets

Vorschau

CSS-Wert

linear-gradient(90deg, #FF6B6B 0%, #4ECDC4 100%)

CSS-Block

.my-gradient {
  background: linear-gradient(90deg, #FF6B6B 0%, #4ECDC4 100%);
}

Tailwind (Annäherung)

bg-gradient-to-r from-red-400 to-teal-400

Tailwind-Output nur für Linear-Gradients mit zwei Stops – komplexere Verläufe brauchen reines CSS.

Das Wichtigste auf einen Blick

  • Drei Gradient-Typen: Linear, Radial und Conic (modern, seit 2021 in CSS).
  • 2–5 Color-Stops mit präziser Position (0–100 %).
  • Richtung in Grad oder als Keyword (to right, to bottom, etc.).
  • Output als reiner CSS-Code oder als Tailwind-Klassen-Annäherung.
  • 15 fertige Presets von subtil bis dramatisch zum direkten Übernehmen.

CSS-Gradients sind weiche Farbverläufe direkt aus dem Stylesheet – ohne Bilddatei. Drei Typen decken alle gängigen Anwendungsfälle ab: linear-gradient für klassische Verläufe in einer Richtung (horizontal, vertikal, diagonal), radial-gradient für kreis- oder ellipsenförmige Verläufe vom Zentrum nach außen und conic-gradient für kegelförmige Verläufe um einen Punkt – ideal für Pie-Chart-Optik. Genutzt werden Gradients überall, wo Farbe Tiefe oder Atmosphäre bringen soll: Buttons, Hero-Sections, Card-Hintergründe, Dashboards. Vorteile gegenüber Bildern: winzige Dateigröße, beliebig skalierbar ohne Qualitätsverlust und perfekte Performance auf jedem Display.

Was unser Tool besonders macht: Alle drei Gradient-Typen mit den richtigen Steuerungen pro Modus – Winkel oder Keyword bei Linear, Form und Position bei Radial, Startwinkel bei Conic. Zwei bis fünf Color-Stops mit präziser Prozent-Position, native Color-Picker, Live-Vorschau im Hintergrund einer 320×320-Box. Output kommt als reiner CSS-Wert, als kompletter CSS-Block mit Selektor und – bei einfachen Linear-Gradients mit zwei Stops – als Tailwind-Klassen-Annäherung. 15 fertige Presets von subtil bis dramatisch laden Typ, Stops und Richtung mit einem Klick.

Hintergrund & Anwendungen

Gradient-Typen

  • linear-gradient: Farbverlauf in einer Richtung (horizontal, vertikal, diagonal).
  • radial-gradient: Kreis- oder ellipsenförmiger Farbverlauf vom Zentrum nach außen.
  • conic-gradient: Kegelförmiger Farbverlauf um einen Punkt – seit 2021 in allen Browsern.
  • repeating-*: Jede Variante als Repeat-Version – wiederholt sich für Streifen-Muster.

Wann Gradients nutzen

  • Buttons: Subtile Linear Gradients geben Tiefe ohne aufdringlich zu sein.
  • Hero-Sections: Vollflächige Gradients ersetzen Bilder und laden deutlich schneller.
  • Cards: Radial Gradients erzeugen weiche, atmosphärische Hintergründe.
  • Charts: Conic Gradients eignen sich perfekt für Pie-Chart-Optik ohne SVG.

Color-Stops

  • Position: Wo eine Farbe 100 % Anteil hat (0 % = Anfang, 100 % = Ende).
  • Mehrere Stops: Mehr als 2 Farben für komplexe Verläufe wie Sonnenuntergang oder Regenbogen.
  • Hard-Stops: Zwei Stops mit gleicher Position erzeugen eine scharfe Kante statt Verlauf.
  • Übergangs-Mitte: Standard ist 50 %, kann durch eigene Stop-Positionen verschoben werden.

Performance und Best Practices

  • Klein: Gradients sind reines CSS – keine zusätzliche Bilddatei nötig.
  • Skaliert: Funktioniert in jeder Größe ohne Qualitätsverlust oder Pixelung.
  • Browser-Support: Linear/Radial seit IE10, Conic seit Chrome 69 (2018) und Safari 12.1.
  • Animation: Direkt nicht animierbar – aber Filter wie hue-rotate oder background-position als Trick.

Wie ein CSS-Gradient aufgebaut wird

Die Syntax von linear-gradient Schritt für Schritt – die anderen Typen folgen demselben Muster mit Typ-spezifischer Position.

  1. 1background: linear-gradient() definiert den Verlauf.
  2. 2Erstes Argument: Richtung (z. B. „to right“ oder „45deg“).
  3. 3Folgende Argumente: Color-Stops getrennt durch Kommas.
  4. 4Color-Stop-Syntax: „farbe position“ (z. B. „#ff0000 0%“).
  5. 5Mindestens 2 Stops nötig, beliebig viele möglich.
  6. 6Bei radial-gradient: Form (circle/ellipse) und Position als Erstes.
  7. 7Bei conic-gradient: Startwinkel und Position als Erstes.
  8. 8Browser rendert den Verlauf zwischen den Stops automatisch.

Gradient-Beispiele

Häufige Patterns mit ihrem Code.

PatternCSS-CodeWirkung
Vertikaler Verlauflinear-gradient(to bottom, #fff, #000)Klassisch von oben nach unten.
Diagonaler Verlauflinear-gradient(45deg, #ff0080, #ff8c00)Dynamisch und modern.
Sunsetlinear-gradient(to right, #ff7e5f, #feb47b)Warmes Sonnenuntergangs-Gefühl.
Radial vom Zentrumradial-gradient(circle, #00f, transparent)Spotlight-Effekt.
Conic 360°conic-gradient(red, yellow, lime, blue, red)Regenbogen-Kreis um einen Punkt.
Streifenrepeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px)Diagonale Streifen-Muster.

Häufig gestellte Fragen

Anleitung

  1. 1

    Gradient-Typ wählen

    Linear für Richtungs-Verläufe, Radial für Kreis-Effekte, Conic für kegelförmige Übergänge.

  2. 2

    Farben hinzufügen

    2–5 Color-Stops setzen, jeder mit eigener Position zwischen 0 und 100 %.

  3. 3

    Richtung einstellen

    Bei Linear: Grad oder Keyword (to right, to bottom-left). Bei Radial/Conic: Position des Zentrums.

  4. 4

    Code übernehmen

    CSS-Wert, kompletter CSS-Block mit Selektor oder Tailwind-Annäherung mit einem Klick kopieren.

Über Selbststarter

Selbststarter ist deine Sammlung kostenloser Online-Tools – aktuell Generatoren, bald auch Konverter und mehr. Alle Tools laufen im Browser, ohne Anmeldung, ohne Tracking.

  • #css
  • #design
  • #frontend
  • #webentwicklung
  • #farben