CSS-Farbverläufe für das Web erstellen
Was dieser Generator leistet
Ein CSS-Farbverlauf blendet zwei oder mehr Farben über eine Fläche ineinander, und dieser Generator macht daraus fertiges CSS zum Einfügen, ohne dass Sie die Syntax von Hand schreiben. Sie wählen den Verlaufstyp, setzen Farbstopps, und das Werkzeug baut die passende background-Regel zusammen — entweder eine linear-gradient()- oder eine radial-gradient()-Funktion — während eine Live-Vorschau jede Änderung im Moment des Einstellens abbildet.
Jeder Farbstopp trägt seine eigene Farbe, seine Position auf der Strecke in Prozent und seine Deckkraft, sodass Sie genau bestimmen, wo ein Farbton in den nächsten übergeht. Die Vorlagen liefern eine fertige Palette zum Feinjustieren statt einer leeren Fläche.
Wann er sich lohnt
Greifen Sie darauf zurück, sobald eine einfarbige Fläche zu nüchtern wirkt: Hero-Hintergründe, Buttons, Karten, Badges und Tönungs-Overlays wirken mit einem dezenten Farbübergang gleich lebendiger. Designerinnen und Designer prototypen damit einen Look in Sekunden; Entwickelnde holen sich die korrekte Syntax, ohne Winkel-Schlüsselwörter und Prozentregeln auswendig zu lernen.
Er glänzt auch, wenn Sie einen vorhandenen Farbverlauf nachbauen: Stopp für Stopp rekonstruieren, den Winkel anpassen und das Ergebnis direkt in ein Stylesheet oder eine styled-component einfügen.
Beispiel: ein linearer Farbverlauf
Angenommen, Sie möchten ein diagonales Verblassen von Blau nach Violett. Stellen Sie den Typ auf linear, setzen Sie einen ersten Stopp bei 0% und einen zweiten bei 100% und legen Sie den Winkel auf 135deg fest. Die Ausgabe lautet dann background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);. Wechseln Sie zu radial, erscheinen dieselben beiden Stopps als radial-gradient(circle, #3b82f6 0%, #8b5cf6 100%) und breiten sich vom Zentrum nach außen aus, statt einer Linie zu folgen.
Verlaufstypen, Stopps und Randfälle
Lineare Farbverläufe folgen einer geraden Linie, deren Winkel oder Richtung Sie festlegen; radiale breiten sich von einem Mittelpunkt aus, mit einer Form (circle oder ellipse), einer Größe wie farthest-corner und einer verstellbaren X/Y-Position. Mehr als zwei Stopps erzeugen mehrfarbige Bänder, und zwei Stopps an derselben Position ergeben einen harten Farbsprung statt eines weichen Übergangs. Eine Deckkraft unter 100% lässt den Verlauf über einem Foto oder einer anderen Ebene liegen. Sieht das Ergebnis stimmig aus, kopieren Sie das CSS oder laden es herunter und übernehmen es in Ihr Projekt.