CSS-Verlaufsgenerator
Erstellen Sie schnell einen Farbverlauf-Hintergrund (linear-gradient) für eine Webseite, mit Echtzeit-Vorschau und kopierbereitem CSS-Code — ohne Figma oder Photoshop zu öffnen.
So funktioniert es
Ein linearer CSS-Farbverlauf (linear-gradient) ermöglicht es, einen visuell ansprechenden Hintergrund — Banner, Schaltfläche, Abschnittshintergrund — ohne Bild oder externes Design-Tool zu erstellen. Wählen Sie zwei Farben und einen Winkel, beobachten Sie die Live-Vorschau und kopieren Sie dann direkt die erzeugte background-Eigenschaft in Ihr Stylesheet. Das ist der schnellste Ansatz, um einen Farbverlaufshintergrund zu prototypisieren, bevor Sie ihn in Ihrem Styleguide verfeinern.
Kann ich mehr als zwei Farben in einem Farbverlauf verwenden?
CSS erlaubt das nativ (zum Beispiel linear-gradient(90deg, #fff, #f00, #00f)), aber dieses Tool konzentriert sich bewusst auf einen Farbverlauf mit zwei Farben, dem häufigsten Anwendungsfall für einen Abschnitts- oder Schaltflächenhintergrund. Für einen komplexeren Farbverlauf können Sie das hier erzeugte Ergebnis kopieren und dann zusätzliche Farbstopps direkt in Ihrem CSS hinzufügen.
Was stellt der Winkel des Farbverlaufs dar?
Der Winkel bestimmt die Richtung, in die sich der Farbverlauf entwickelt: 0° verläuft von unten nach oben, 90° von links nach rechts, 180° von oben nach unten usw. Das ist dieselbe Konvention, die nativ von der CSS-Funktion linear-gradient() verwendet wird, sodass der hier kopierte Code genau die Darstellung erzeugt, die Sie in der Vorschau sehen.
100% lokale Verarbeitung: Die Erzeugung des CSS-Codes erfolgt direkt in Ihrem Browser über WebAssembly, ohne jeden Aufruf an einen externen Server.