CodeKitHubWas ist dieses Tool?
CSS-Verläufe sind Bilder, die der Browser aus einer Liste von Farben erzeugt, anstatt Dateien, die du hochlädst — linear-gradient() lässt Farben entlang einer geraden Linie in einem bestimmten Winkel ineinander übergehen, während radial-gradient() Farben von einem Mittelpunkt nach außen übergehen lässt. Beide akzeptieren zwei oder mehr Farbstopps, die jeweils optional an einer Position innerhalb des Verlaufs fixiert werden können.
Von Hand geschrieben, geraten Verläufe leicht subtil falsch: Reihenfolge der Stopps, fehlende Prozentwerte oder ein Winkelwert in die falsche Richtung (CSS-Winkel laufen im Uhrzeigersinn ab 'to top', anders als mathematische Winkel). Dieses Tool hält die Syntax aus dem Weg — stelle Farben und Positionen mit Farbwählern und Reglern ein, beobachte die Live-Vorschau in Echtzeit und kopiere das resultierende CSS, sobald es passt.
Quelle: CSS Images Module Level 3, W3C — die Spezifikation, die die Syntax von linear-gradient() und radial-gradient() definiert.
Warum sollte man es nutzen?
- Die Live-Vorschau aktualisiert sich sofort bei jeder Änderung von Farbe, Position und Winkel — kein Neuladen der Seite nötig, um das Ergebnis zu sehen.
- Wechsle mit einem Klick zwischen linearem und radialem Verlauf; der Winkel-Regler wird bei radialen Verläufen automatisch ausgeblendet, da er dort nicht zutrifft.
- Füge Farbstopps hinzu oder entferne sie (2 bis 4), statt auf einen festen Zweifarben-Verlauf beschränkt zu sein.
- Jeder Stopp hat einen eigenen Positionsregler, sodass die Stopps nicht gleichmäßig verteilt sein müssen.
- Erzeugt copy-paste-fertigen CSS-Code in der Standardsyntax linear-gradient()/radial-gradient().
- Läuft komplett in deinem Browser — nichts, was du einstellst, wird irgendwohin hochgeladen. Kostenlos, keine Anmeldung, funktioniert auf dem Handy.
Anleitung
- Wähle Linear oder Radial als Verlaufstyp.
- Ziehe bei einem linearen Verlauf den Winkel-Regler — 90deg verläuft von links nach rechts, 180deg von oben nach unten, und so weiter.
- Stelle Farbe und Position für jeden Stopp ein; der erste Stopp ist die Startfarbe des Verlaufs, der letzte seine Endfarbe.
- Klicke auf '+ Stopp hinzufügen', um bis zu 4 Stopps insgesamt für einen mehrfarbigen Verlauf hinzuzufügen, oder auf die ✕-Schaltfläche, um einen zu entfernen (Minimum 2).
- Kopiere den generierten CSS-Code und füge ihn in eine background- oder background-image-Deklaration ein.
Beispiel
Eingabe
Linear · Winkel: 90deg · Stopps: #f97316 bei 0%, #ec4899 bei 100%Ausgabe
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Ein Verlauf von Orange zu Pink von links nach rechts — ein gängiger Stil für Buttons, Banner und Hero-Hintergründe.
Lineare vs. radiale Verläufe
Ein linearer Verlauf lässt Farbe entlang einer geraden Linie übergehen, gesteuert durch einen Winkel — nützlich für Banner, Buttons und gerichtete Hintergründe. Ein radialer Verlauf lässt Farbe von einem Mittelpunkt nach außen in sich ausdehnenden Ringen übergehen, was sich für Spotlight-Effekte, Badges oder Glow-artige Hintergründe eignet. Dieses Tool setzt den radialen Verlauf standardmäßig als im Kasten zentrierten Kreis, was den häufigsten radialen Anwendungsfall abdeckt; CSS unterstützt außerdem Ellipsenformen und außermittige Positionen, falls du das Ergebnis noch weiter von Hand bearbeiten möchtest.
Häufige Verlaufsmuster
- Dezenter Markenakzent: zwei nahe beieinanderliegende Farbtöne (z. B. zwei Schattierungen derselben Farbe) in einem flachen Winkel für einen sanften Hintergrund-Wash.
- Kontrastreicher CTA-Button: zwei gesättigte, komplementäre Farben bei 90deg oder 135deg für einen kräftigen, klickbaren Look.
- Overlay auf einem Bild: ein Verlauf von transparent zu einer vollen Farbe (Deckkraft über eine rgba-Farbe im zugrunde liegenden Hex-Wert des Farbwählers einstellen oder nach dem Kopieren anpassen), über eine background-image gelegt.
- Mehrfarbiger Regenbogen-/Markenverlauf: 3–4 Stopps über den gesamten Bereich von 0–100% verteilt für sanftere, allmählichere Übergänge, als ein Zweifarben-Verlauf erlaubt.
- Radiales Spotlight: ein heller Mittelpunkt-Stopp nahe 0%, der zu einem dunkleren Randstopp nahe 100% verblasst, nützlich für Hero-Bereiche oder Karten-Highlights.
Kombination mit anderen CSS-Tools
Verläufe werden oft mit abgerundeten Ecken und Schatten auf demselben Element kombiniert — eine Verlaufskarte mit weichem box-shadow und abgerundeten Ecken ist ein gängiges UI-Muster. Erzeuge jedes Element separat und kombiniere die CSS-Deklarationen am Element.
→ Box-Shadow-Generator · Border-Radius-Generator · Farbauswahl
Häufig gestellte Fragen
Was ist der Unterschied zwischen linear-gradient() und radial-gradient()?
linear-gradient() lässt Farben entlang einer geraden Linie in einem festgelegten Winkel übergehen. radial-gradient() lässt Farben von einem Mittelpunkt nach außen in sich ausdehnenden Formen (Kreis oder Ellipse) übergehen. Beide akzeptieren dieselbe Art von kommagetrennter Farbstopp-Liste; nur die Form des Übergangs unterscheidet sich.
Wie funktionieren CSS-Verlaufswinkel?
CSS-Verlaufswinkel laufen im Uhrzeigersinn beginnend bei 'to top' (0deg zeigt nach oben). 90deg zeigt nach rechts, 180deg nach unten und 270deg nach links — die entgegengesetzte Konvention zu üblichen mathematischen Winkeln, was beim manuellen Schreiben von Verläufen häufig zu Verwirrung führt.
Kann ich mehr als 4 Farbstopps verwenden?
Ja — CSS-Verläufe akzeptieren eine beliebige Anzahl kommagetrennter Farbstopps. Dieses Tool begrenzt den interaktiven Builder auf 4 für eine überschaubare Oberfläche, aber du kannst das generierte CSS kopieren und manuell weitere kommagetrennte 'Farbe Position%'-Einträge in deinem Stylesheet ergänzen.
Warum sieht mein Verlauf gebändert statt weich aus?
Bänderung entsteht meist durch Farben, die im Farbton zu weit auseinanderliegen mit zu wenigen Stopps dazwischen, oder durch die eigene begrenzte Farbpräzision des Browsers bei sehr geringem Kontrast. Das Hinzufügen eines Zwischenstopps mit einer gemischten Farbe oder die Wahl farbtonnäherer Farben ergibt in der Regel ein weicheres Resultat.
Kann ich einen CSS-Verlauf animieren?
Nicht direkt — Verläufe sind nicht nativ animierbar wie background-position oder transform, da Browser nicht zwischen zwei beliebigen Verlaufsdefinitionen interpolieren können. Übliche Workarounds sind das Animieren von background-position auf einem überdimensionierten Verlauf oder ein Übergang von background-color, wenn sich nur eine einzelne Farbe ändert.