🌈

CSS Gradient Generator

Lineare und radiale CSS-Gradienten erstellen und in der Vorschau anzeigen. Fertigen CSS-Code kopieren.

Design-Tools Läuft lokal Keine Daten gesendet
CSS-Farbverlauf linear radial Design
Verlaufstyp
Richtung
●
Farbstopps
CSS-Ausgabe

Was ist der CSS Gradient Generator?

Erstellen Sie CSS-lineare und radiale Farbverläufe und sehen Sie sie in der Vorschau an. Fügen Sie Farbstopps hinzu, wählen Sie die Richtung und kopieren Sie sofort einsatzbereiten CSS-Code.

So verwendest du den Gradient-Generator

  1. Wähle aus, ob du einen linearen oder radialen Verlauf möchtest.
  2. Füge Farbstopps hinzu oder passe sie an, bis die Überblendung stimmt.
  3. Passe Winkel, Position oder Ausbreitung in der Live-Vorschau fein an.
  4. Kopiere das generierte CSS, sobald du es in deinem Projekt verwenden möchtest.

Verwandte Tools

🎨
Farbpalette Generator
Erzeugen Sie komplementäre, analoge und triadische Farbpaletten
 🎨
Farbe wählen
Konvertieren Sie Farben zwischen HEX, RGB, HSL und CMYK
 ⚖️
WCAG Kontrast Checker
Prüfen Sie WCAG-AA- und AAA-Farbkontrastverhältnisse für Barrierefreiheit
CSS-Gradienten verstehen ▾
Beispiel
Eingabe Linear, 90°, Farbstopps: #6366F1 → #8B5CF6
Ausgabe background: linear-gradient(90deg, #6366F1, #8B5CF6);
Häufige Anwendungsfälle
  • Hero-Hintergrund-Gradienten für Marketingseiten erstellen
  • Winkel- und Farbstopp-Anpassungen testen, bevor CSS-Dateien bearbeitet werden
  • Ausgefeilte Button- oder Kartenhintergründe generieren
  • Exaktes Gradient-CSS ohne manuelle Konvertierung mit Entwicklern teilen
Häufig gestellte Fragen
Brauche ich Herstellerpräfixe wie -webkit-linear-gradient?

Nein — alle modernen Browser (Chrome, Firefox, Safari, Edge) unterstützen CSS-Gradienten ohne Präfix. Herstellerpräfixe sind nur für sehr alte Browser (IE 9 und älter) erforderlich.

Kann ich transparente Farbstopps verwenden?

Ja — verwenden Sie rgba()- oder hsla()-Farben mit einem Alpha-Wert von 0, um Ausblendungen nach transparent zu erzeugen. Zum Beispiel blendet rgba(99, 102, 241, 0) das Indigo bis zur Unsichtbarkeit aus.

Kann ich diesen Gradienten für Text verwenden?

Ja — kopieren Sie den Gradientenwert und verwenden Sie ihn mit CSS-Eigenschaften: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Wie viele Farbstopps sind maximal möglich?

Dieses Tool unterstützt bis zu 6 Farbstopps. CSS selbst hat keine feste Obergrenze — Browser unterstützen Gradienten mit Dutzenden von Stopps, die Leistung kann jedoch variieren.