CSS Gradient Generator

Unser Generator unterstützt alle drei CSS-Gradient-Typen: Linear Gradients (Farbverläufe entlang einer geraden Linie), Radial Gradients (kreisförmige oder elliptische Farbverläufe) und Conic Gradients (kegelförmige Farbverläufe um einen Mittelpunkt).

Klicken Sie auf den Button „+ Hinzufügen" oberhalb der Farbstopp-Liste. Es können bis zu 10 Farbstopps hinzugefügt werden. Jeder Stopp verfügt über einen Farbwähler und einen Positionsregler (0–100%). Nicht benötigte Stopps können über das Entfernen-Symbol gelöscht werden.

Ja, der generierte CSS-Code wird in mehreren Varianten angezeigt: formatiert, einzeilig (minifiziert), als Tailwind-CSS-Klasse und als background-image-Kurzform. Jede Variante hat einen Kopieren-Button, der den Code direkt in Ihre Zwischenablage überträgt.

Ein linearer Gradient verläuft entlang einer geraden Linie in einem bestimmten Winkel (z.B. von oben nach unten). Ein radialer Gradient strahlt von einem Mittelpunkt kreisförmig oder elliptisch nach außen. Lineare Gradienten eignen sich besonders für Hintergründe und Buttons, radiale für Spotlights und Highlight-Effekte.

Lineare und radiale Gradienten werden von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Conic Gradients werden seit 2020 ebenfalls von allen gängigen Browsern unterstützt. Vendor-Prefixes sind bei aktuellen Browsern nicht mehr nötig.

Ja, jeder Farbstopp unterstützt einen Transparenz-Regler (Opacity). Damit können Sie halbtransparente Verläufe erstellen, die sich über Hintergrundbilder oder andere Elemente legen lassen. Der CSS-Code wird automatisch im RGBA-Format ausgegeben, wenn Transparenz verwendet wird.

Conic Gradients (kegelförmige Verläufe) verteilen Farben um einen Mittelpunkt herum, ähnlich einem Farbrad. Sie eignen sich hervorragend für Kreisdiagramme, Farbräder, Ladeanzeigen und dekorative Elemente. Der Startwinkel und die Position des Mittelpunkts können frei gewählt werden.

Im Bereich „Vorlagen" finden Sie 12 vorgefertigte Gradienten. Klicken Sie einfach auf eine Vorlage, um sie zu übernehmen. Alle Farbstopps und Einstellungen werden automatisch angepasst. Von dort aus können Sie den Gradient weiter individualisieren.

Dieses Tool ist primär auf die CSS-Code-Generierung ausgerichtet. Für ein Bild können Sie den CSS-Code in einem HTML-Element verwenden und einen Screenshot erstellen, oder den generierten Gradient-Code in einem Grafiktool wie Figma oder Canva nachbauen.

Nein. Alle Berechnungen und Vorschauen erfolgen vollständig lokal in Ihrem Browser. Es werden keine Daten an einen Server übertragen. Ihre Farbwahl und Einstellungen verlassen niemals Ihren Computer.