CSS-Farbverlauf-Generator
Wähle 2 oder 3 Farben, die Art des Verlaufs und den Winkel: Die Vorschau ändert sich in Echtzeit, und der CSS-Code lässt sich sofort kopieren.
Linear oder radial: Welchen Verlauf solltest du nehmen?
Ein linearer Verlauf mischt die Farben entlang einer geraden Linie: Bei 90° verläuft er von links nach rechts, bei 180° von oben nach unten. Er ist die erste Wahl für Hero-Hintergründe, Buttons und Banner. Ein radialer Verlauf beginnt in der Mitte und breitet sich kreisförmig nach außen aus, ideal für Leuchteffekte, weiche Hintergründe und Avatare. In beiden Fällen greift der erzeugte Code auf die nativen Funktionen linear-gradient() und
radial-gradient() zurück, die jeder moderne Browser ohne Vendor-Präfixe unterstützt.
So verwendest du den erzeugten Code
Kopiere die Zeile und setze sie in deinem Stylesheet als Wert der Eigenschaft background
bei einem beliebigen Element ein: einem div, dem body, einer Karte. Bei 3 Farben verteilt der Browser die Farbstopps gleichmäßig (0 %, 50 %, 100 %); wenn du mehr Kontrolle brauchst, ergänze von Hand Prozentwerte nach jeder Farbe, zum Beispiel #ff8a5c 20%. Ein praktischer Tipp: Zwei nah beieinanderliegende Farben ergeben elegante, dezente Übergänge, zwei gegensätzliche Farben dagegen einen kräftigen Kontrast, perfekt für Call-to-Action-Elemente.