Über dieses Tool
CSS-Verläufe sind überall — Hero-Hintergründe, Buttons, Karten — aber die Syntax von Hand zu schreiben und Winkel zu raten ist mühsam. Dieser visuelle Builder lässt Sie Farbstopps hinzufügen und ziehen, den Winkel einstellen und zwischen linearen, radialen und konischen Verläufen wechseln, während das Ergebnis eine Live-Vorschau füllt.
Wenn es passt, kopieren Sie das fertige background-CSS direkt in Ihr Stylesheet. Es ist vollständig clientseitig — experimentieren Sie beliebig, nichts wird gesendet.
Häufige Fragen
Fügt dieser Generator Vendor-Präfixe wie -webkit-linear-gradient hinzu?
Nein. Die Syntax mit Vendor-Präfixen wird nur von sehr alten Browsern (vor 2012) benötigt, daher gibt das Tool nur das Standard-linear-gradient(), radial-gradient() und conic-gradient() aus, das jeder aktuelle Browser versteht.
Wird mein Verlaufsdesign irgendwohin hochgeladen oder gespeichert?
Nein. Alles — Farbstopps, Winkel und Vorschau — wird live in Ihrem Browser erzeugt; es wird nichts an einen Server gesendet.
Was ist der Unterschied zwischen linearem, radialem und konischem Verlauf?
Linear mischt Farben entlang einer geraden Linie in einem gewählten Winkel, radial breitet sich kreisförmig von einem Mittelpunkt nach außen aus, und konisch dreht die Farben wie ein Farbrad um einen Mittelpunkt.
Wie viele Farbstopps kann ich hinzufügen?
So viele wie nötig — klicken Sie auf 'Add', um einen weiteren Stopp einzufügen, ziehen Sie dessen Positions-Schieberegler, und entfernen Sie jeden Stopp außer den letzten beiden.
Kann ich das generierte CSS direkt in mein Stylesheet einfügen?
Ja. Klicken Sie auf Copy und fügen Sie die Zeile `background: ...;` direkt in jede CSS-Regel oder jeden Inline-Stil ein — ohne weitere Bearbeitung.