Verlaufsgenerator
Läuft komplett in deinem Browser. Deine Dateien und Daten verlassen dein Gerät nie.
Über dieses Tool
Mit einem Verlaufsgenerator baust du einen CSS-Verlauf nach Augenmaß, statt Winkel und Stopp-Positionen zu erraten. Wähle zwischen linear, radial und konisch, füge Farbstopps hinzu oder entferne sie, und passe Farbe und Position jedes Stopps an, während eine große Vorschau-Box sofort reagiert.
Was unterscheidet die drei Verlaufsarten?
Ein linearer Verlauf mischt Farben entlang einer geraden Linie, deren Richtung du per Winkelregler bestimmst: 90 Grad läuft von links nach rechts, 180 Grad von oben nach unten. Ein radialer Verlauf breitet sich von einem Mittelpunkt aus, wobei du zwischen Kreis (in alle Richtungen gleich weit) und Ellipse (an die Form der Box angepasst) wählen kannst. Ein konischer Verlauf legt Farben wie bei einem Farbrad oder Tortendiagramm um einen Mittelpunkt herum, ebenfalls mit einem Winkel, der den Startpunkt des Umlaufs festlegt. Jede Art akzeptiert beliebig viele Farbstopps, und jeder Stopp hat eine Farbe und eine Position zwischen 0 und 100 Prozent, sodass sich Farben eng zusammenschieben oder gleichmäßig verteilen lassen.
Kann ich von einer fertigen Vorlage statt bei null starten?
Ja. Das Tool bringt einige Vorlagen mit, etwa einen warmen zweifarbigen linearen Verlauf namens „Sunset”, einen radialen „Deep Space”-Verlauf und ein vollständiges konisches „Rainbow Wheel”. Wählst du eine aus, lädt sie in den Editor, und du passt Farben, Stopps oder Winkel von dort aus an, statt bei einer leeren Vorschau zu beginnen. Was auch dabei herauskommt, die Ausgabezeile ist genau das CSS, das du von Hand schreiben würdest, etwa linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%), direkt bereit zum Einfügen ins Stylesheet.
Wird irgendetwas von meinem Entwurf hochgeladen?
Nein. Aufbau und Vorschau des Verlaufs laufen vollständig im Browser, nichts von dem, was du gestaltest, verlässt deinen Rechner. Damit lässt sich der Markenverlauf eines Kunden oder der Hintergrund eines internen Produkts bedenkenlos entwerfen, bevor irgendetwas live geht.
Nutze das Tool, um die Zeile background: linear-gradient(...) für einen Hero-Bereich zu bekommen, einen radialen Schein hinter einer Karte, oder einen konischen Verlauf für einen Fortschrittsring oder Farbkreis. Die vollständige Syntax von linear-gradient(), radial-gradient() und conic-gradient() findest du in der MDN-Referenz zu gradient.