Kostenloser CSS-Gradientengenerator – Erstellen Sie lineare, radiale und konische Gradienten

Erstellen Sie schöne CSS-Gradienten mit diesem kostenlosen Online-Gradientengenerator. Wählen Sie zwischen linearen, radialen und konischen Gradienten, passen Sie Farben und Winkel an und kopieren Sie den CSS-Code sofort.

Was ist ein CSS-Gradient?

Ein CSS-Gradient ist ein sanfter Übergang zwischen zwei oder mehr Farben, der mithilfe der background-Eigenschaft in CSS erstellt wird. Gradienten eliminieren die Notwendigkeit von Bildern, reduzieren die Ladezeiten der Webseiten und ermöglichen vollständig responsive, resolution-unabhängige Hintergründe.

Es gibt drei Haupttypen von CSS-Gradienten:

Lineare Gradienten übergängen Farben entlang einer geraden Linie, definiert durch einen Winkel oder eine Richtung.
Radiale Gradienten strahlen von einem Zentrumspunkt nach außen, wodurch kreisförmige oder elliptische Muster entstehen.
Konische Gradienten übergängen Farben um einen Zentrumspunkt in einem rotatorischen Streifen, ähnlich wie eine Farbrolle.

So verwenden Sie diesen Gradientengenerator

Wählen Sie den Gradiententyp – Wählen Sie Linear, Radial oder Conic am oberen Rand des Steuerelements aus.
Setzen Sie die Richtung – Für lineare und konische Gradienten können Sie den Winkel mithilfe des Schiebereglers oder der Schnellwahl-Buttons anpassen.
Passen Sie radiale Optionen an – Für radiale Gradienten wählen Sie eine Form (Kreis oder Ellipse) und ein Größenkeyword aus.
Bearbeiten Sie Farbstops – Klicken Sie auf den Farbauswahler, um die Farbe jedes Stops zu ändern. Ziehen Sie den Positions-Schieberegler, um anzuzeigen, wo jede Farbe erscheint.
Fügen Sie Farben hinzu oder entfernen Sie sie – Verwenden Sie den "Farbe hinzufügen"-Button, um weitere Stops hinzuzufügen (bis zu 8), oder klicken Sie auf das X, um einen Stop zu entfernen (mindestens 2).
Probieren Sie eine Voreinstellung aus – Klicken Sie auf eine Voreinstellungs-Swatch, um einen fertig gestellten Gradienten zu laden.
Kopieren Sie den CSS-Code – Klicken Sie auf "CSS kopieren", um die vollständige background-Eigenschaft in Ihre Zwischenablage zu kopieren.

Wichtige Funktionen

Funktion	Vorteil
Drei Gradiententypen	Linear, radial und conic – alle CSS-Gradienten-Modi werden unterstützt
Live-Vorschau	Sehen Sie Ihren Gradienten in Echtzeit aktualisieren, während Sie die Einstellungen anpassen
Bis zu 8 Farbstops	Erstellen Sie komplexe mehrfarbige Gradienten mit präziser Positionierung
Winkelsteuerung	Schieberegler + Schnellwahl-Buttons für gängige Winkel (0°–315°)
Radiale Form und Größe	Kreis-/Ellipse-Formen mit vier CSS-Größen-Keywords
Ein-Klick-Voreinstellungen	Sechs kurierte Gradienten-Voreinstellungen, um schnell zu starten
CSS-Code kopieren	Ein Klick, um produktionsreifen CSS-Code in Ihre Zwischenablage zu kopieren
Keine Daten gesendet	Alles läuft in Ihrem Browser – keine Server, keine Nachverfolgung

Vergleich der Gradiententypen

Eigenschaft	Linear	Radial	Conic
Richtung	Winkel (0–360°)	Form + Größe-Keyword	Startwinkel
Muster	Gerade Linie	Kreis oder Ellipse vom Zentrum	Rotatorischer Streifen
Bestens geeignet für	Hintergründe, Bannern, Schaltflächen	Spotlight-Effekte, Kugeln, abstrakte Kunst	Tortendiagramme, Farbrollen, Uhren
CSS-Funktion	`linear-gradient()`	`radial-gradient()`	`conic-gradient()`

Praktische Anwendungsfälle

Webseitenhintergründe

Ersetzen Sie flache Farben durch subtile Gradienten für moderne, professionell aussehende Seiten. Ein sanfter linearer Gradient mit 135° und zwei ähnlichen Farben fügt Tiefe hinzu, ohne abzulenken.

Schaltflächen und CTAs

Machen Sie Call-to-Action-Schaltflächen mit lebhaften Gradienten hervorragend. Verwenden Sie einen 180°-Gradienten (oben nach unten) für einen natürlichen Licht-zu-Schatten-Effekt.

Hero-Bereiche

Erstellen Sie auffällige Hero-Bannern mit mutigen mehrfarbigen Gradienten. Kombinieren Sie drei oder mehr Farben für einen einzigartigen Markenlook.

Überlagerungen und Karten

Wenden Sie semi-transparente Gradienten auf Bilder an, um die Lesbarkeit des Textes sicherzustellen, während visuelle Interesse erhalten bleibt.

Datenvisualisierung

Verwenden Sie konische Gradienten, um einfache Tortendiagramme, Fortschrittsrings oder Farbrollen ohne JavaScript oder SVG zu erstellen.

Tipps für bessere Gradienten

Begrenzen Sie sich auf 2–3 Farben für saubere, professionelle Designs. Mehr Stops können funktionieren, erfordern jedoch sorgfältige Anpassung.
Verwenden Sie ähnliche Farbtöne für subtile Gradienten (z. B. hellblau zu dunkelblau) und komplementäre Farben für mutige Designs.
Passen Sie Ihren Winkel an das Layout an – 180° funktioniert gut für vertikale Bereiche, 90° für horizontale Streifen.
Testen Sie auf dunklen und hellen Themen – Ein Gradient, der auf einem weißen Hintergrund gut aussieht, kann für die Dunkelmodus-Unterstützung angepasst werden.
Verwenden Sie background-size und background-repeat, um kleine Gradienten in Muster zu tilen.
Kombinieren Sie mit Transparenz – Verwenden Sie rgba()-Farben, um Gradienten zu erstellen, die sich mit dem darunterliegenden Inhalt verbinden.

Verständnis der CSS-Gradientensyntax

Ein grundlegender linearer Gradient:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Ein radialer Gradient mit Form und Größe:

background: radial-gradient(circle farthest-corner, #667eea 0%, #764ba2 100%);

Ein konischer Gradient:

background: conic-gradient(from 0deg, #667eea 0%, #764ba2 50%, #667eea 100%);

Alle modernen Browser unterstützen diese Gradiententypen ohne Vendor-Prefixe.

Häufig gestellte Fragen

Wie viele Farben kann ich in einem CSS-Gradienten verwenden?

CSS unterstützt beliebig viele Farbstops. Dieses Tool ermöglicht bis zu 8 für praktische Anwendung. In echten Projekten sind 2–4 Stops am häufigsten.

Was ist der Unterschied zwischen linearen und radialen Gradienten?

Lineare Gradienten übergängen Farben entlang einer geraden Linie bei einem festgelegten Winkel. Radiale Gradienten übergängen Farben von einem Zentrumspunkt in einer kreisförmigen oder elliptischen Form.

Funktionieren CSS-Gradienten in allen Browsern?

Ja. Alle modernen Browser (Chrome, Firefox, Safari, Edge) unterstützen linear-gradient, radial-gradient und conic-gradient vollständig ohne Vendor-Prefixe.

Können CSS-Gradienten animiert werden?

CSS kann nicht direkt zwischen Gradientenwerten mit Übergängen animiert werden. Sie können jedoch die Position des Gradienten mit background-position animieren oder CSS @property für benutzerdefinierte Eigenschaftsanimationen in unterstützten Browsern verwenden.

Wie erstelle ich einen transparenten Gradienten?

Verwenden Sie rgba() oder hsla()-Farbwerte mit einem Alphakanal. Beispiel: rgba(102, 126, 234, 0.5) gibt eine halbtransparente Version der Farbe.

Speichert dieses Tool meine Gradientendaten?

Nein. Die Erstellung von Gradienten erfolgt vollständig im Browser. Keine Daten werden an einen Server gesendet.

Gradientengenerator