Stimmt etwas mit diesem Tool nicht?
Über „CSS-Gradient-Generator Online“
Dieses Tool erstellt visuell CSS-Verläufe (linear, radial, conic). Color Stops hinzufügen, Richtung/Winkel wählen, Transparenz einstellen — das passende CSS steht bereit.
Verläufe sind allgegenwärtig im modernen Webdesign: Hero-Hintergründe, Button-Zustände, Karten-Akzente, Verlauftexte. Per Hand CSS zu schreiben ist mühsam; visuell zu editieren erlaubt feines Probieren ohne ständiges Trial-and-Error.
Unterstützt mehrere Stops, prozentuale Positionen, Interpolation in verschiedenen Farbräumen und Conic-Verläufe für kreisförmige Effekte. Als CSS oder Tailwind-Utility-Klasse kopierbar.
So nutzt du dieses Tool
Eine CSS-Deklaration für linear-gradient mit zwei Farbstopps bauen
Farbstopps wählen
«Color 1» und «Color 2» akzeptieren beliebige CSS-Farben: hex (`#1e3a8a`), rgb (`rgb(30 58 138)`), rgba mit Alpha, oder benannte (`navy`). Erster Stopp bei 0 %, zweiter bei 100 %.
Winkel
«Angle (deg)» steuert die Richtung in Grad. `0` von unten nach oben, `90` von links nach rechts, `180` von oben nach unten (CSS-Default), `45` klassische Diagonale.
Ausführen
Ergebnis: einzelnes Feld `css` — `linear-gradient(<angle>deg, <color1>, <color2>)`. Direkt als Wert für `background:` oder `background-image:` einfügen.
Mehr als zwei Stopps
Für radial, conic oder 3+ Stopps die Ausgabe manuell anpassen — Syntax `linear-gradient(45deg, #fff 0%, #000 50%, #f00 100%)`. Oder einen vollständigeren Gradient-Editor nehmen; dieses Tool ist absichtlich minimal für 2-Stopp-Linear.