CSS-Gradient-Generator

Dieser CSS-Gradient-Generator gibt Ihnen einen visuellen Spielplatz zum Erstellen linearer, radialer und konischer Verläufe und liefert Ihnen dann mit einem Klick produktionsreifes CSS. Statt Hex-Werte im Stylesheet zu erraten und den Browser neu zu laden, justieren Sie Farben, Winkel und Positionen live, bis das Ergebnis stimmt, und kopieren einen Wert, den Sie direkt in eine Regel einfügen können.

Gradient-Typen auf einen Blick

Typ	Achse	Winkel verwendet?	Typischer Einsatz
Linear	Eine gerade Linie über das Element	Ja	Hero-Hintergründe, Buttons, Rahmen
Radial	Strahlen von einem Mittelpunkt	Nein — nutzt Kreis oder Ellipse	Spotlights, Vignetten, Glow-Effekte
Konisch	Ein Schwung um ein Zentrum	Ja (Startnaht)	Farbkreise, Torten- und Fortschrittsdiagramme

Alle drei sind CSS-Funktionen — linear-gradient(), radial-gradient() und conic-gradient() — keine Bilddateien. Der Browser berechnet die Pixel, sodass das Ergebnis auf jede Elementgröße ohne Unschärfe skaliert und netzwerktechnisch nichts kostet.

So erstellen Sie hier einen Verlauf

1. Typ wählen. Linear, radial oder konisch. Ein Wechsel des Typs ändert sofort, welche Regler zählen.
2. Geometrie festlegen. Für linear und konisch den Winkel anpassen. Für radial Kreis oder Ellipse wählen.
3. Farbstopps bearbeiten. Jede Zeile hat ein Farbfeld und eine Position von 0 bis 100. Mit der Schaltfläche „Farbstopp hinzufügen“ neue Zeilen anlegen.
4. CSS kopieren. Die erzeugte Deklaration wird unter der Vorschau angezeigt; die Schaltfläche Kopieren legt sie in Ihre Zwischenablage.

Das Vorschaufenster spiegelt jede Änderung sofort wider, sodass der kopierte Code genau dem Verlauf entspricht, den Sie sehen. Neue Stopps starten als Pink bei 50 %, und die Position jedes Stopps ist eine freie Zahl statt eines festen Platzes, sodass Sie zwei Stopps bei 20 % und 25 % für ein schmales Band setzen oder mehrere bei 100 % bündeln können, um eine scharfe Endkante zu erzeugen. Der Generator sortiert Stopps vor der Ausgabe des CSS nach Position, was bedeutet, dass die visuelle Reihenfolge stets der numerischen entspricht, auch wenn Sie sie in anderer Reihenfolge eingegeben haben.

Praxisbeispiel: Button-Verlauf mit drei Stopps

Von zwei Stopps ausgehen und einen in der Mitte hinzufügen:

• #3b82f6 bei 0 %
• #8b5cf6 bei 50 %
• #ec4899 bei 100 %
• Typ: linear, Winkel: 135deg

Der erzeugte Wert ist:

background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);

Ein linearer Verlauf mit 135deg läuft von der oberen linken Ecke zur unteren rechten. Weil der Mittelpunkt ein eigenständiges Violett statt einer Mischung aus Blau und Pink ist, bleibt der Übergang sauber. Dieselben drei Stopps werden mit dem Typ radial zu radial-gradient(circle, …) und ignorieren die 135deg vollständig.

Winkel, Formen und Achsen

Bei linearen Verläufen zeigt 0deg nach oben und die Winkel wachsen im Uhrzeigersinn, sodass 90deg von links nach rechts und 180deg von oben nach unten läuft. Bei konischen Verläufen drehen dieselben Winkelkonventionen die Startnaht. Bei radialen Verläufen steuert die Form, ob die Strahlen einen perfekten Kreis bilden oder sich mit dem Element als Ellipse strecken. Die Stopp-Positionen sind Prozentwerte entlang dieser Achse: bei einem linearen Verlauf ist 0 % das Ende, von dem die Achse ausgeht, und 100 % das andere Ende. Zwei Stopps an derselben Position erzeugen eine harte Farbgrenze, womit Sie Streifen und Tortenstücke bauen.

Winkelwerte werden umgebrochen: die Eingabe von 450 entspricht 90, weil der Generator die Zahl in einen Bereich von 0 bis 360 normalisiert. Negative Winkel funktionieren ebenfalls und brechen in die andere Richtung um. Die Vorschau ist auf ihren Container statt auf eine feste Breite bemessen, sodass ein Verlauf, der im Fenster richtig aussieht, beim Anwenden auf einen Hero über die volle Breite korrekt skaliert. Weil das Fenster und Ihr Zielelement dieselbe Deklaration erhalten, stammt jeder Unterschied nach dem Einfügen aus dem Layoutkontext — Elementgröße, Rahmenradius, darüberliegender Inhalt — und nicht aus dem Verlauf selbst.

Schmutzige Mittelpunkte vermeiden

Die häufigste visuelle Beschwerde bei Verläufen — ein grauer Schleier in der Mitte eines Übergangs von Blau nach Orange oder von Rot nach Grün — stammt aus der sRGB-Interpolation. Der Browser mischt jeden Kanal unabhängig, und komplementäre Farbtöne kreuzen sich in der Mitte des Farbwürfels. Zwei Korrekturen funktionieren gut: einen bewussten Zwischenstopp einfügen (ein Türkis zwischen Blau und Gelb) oder in benachbarten Farbtönen bleiben und die Variation von der Helligkeit tragen lassen. Dithering fügt dieses Tool nicht hinzu, daher können Bänder bei großen, kontrastarmen Verläufen auf manchen Displays weiterhin auftreten; ein dezenter dritter Stopp bricht die Bänder meist auf.

Verläufe erschweren außerdem den Textkontrast. Ein Verlauf kann an beiden Endpunkten eine Kontrastprüfung bestehen und in der Mitte dennoch unter den Schwellenwert fallen. Wenn Sie eine Überschrift darüber platzieren, schätzen Sie den Mittelpunkt mit dem Auge ein oder prüfen Sie die hellsten und dunkelsten Bereiche getrennt, statt nur die Extreme zu testen. Ein Ende abzudunkeln oder eine halbtransparente Überlagerung hinter dem Text hinzuzufügen ist meist einfacher, als den ganzen Verlauf neu zu gestalten.

Grenzen

Der Generator gibt eine einzelne background-Deklaration mit Standardsyntax aus, die aktuelle Browser unterstützen. Er schreibt keine Herstellerpräfixe, sehr alte Browser verstehen das Ergebnis also nicht. Er implementiert auch kein repeating-linear-gradient, keine Farbinterpolationshinweise und nicht die neuere Interpolationsmethode in oklab — die Ausgabe ist reines sRGB. Die Vorschau verwendet dasselbe CSS, das Sie kopieren, was Sie im Fenster sehen, malt also ein moderner Browser.

Die Farbeingabe ist auf den Farbfeld-Wähler beschränkt, der mit Hex arbeitet, und der ausgegebene Wert ist das, was der Wähler meldet. Wenn Ihr Designsystem ein anderes Farbformat erwartet, etwa hsl() oder ein RGB-Tripel, müssen Sie nach dem Kopieren konvertieren. Es gibt keinen gespeicherten Verlauf und keinen Export einer .css-Datei; der Arbeitsablauf ist bewusst auf einen Verlauf zur Zeit ausgelegt.

Verwandte Tools

• Farbwähler
• CSS-Formatierer
• Color Palette Generator