Linearer vs. radialer Verlauf
Ein Farbverlauf ist ein weicher Übergang zwischen zwei oder mehr Farben, den CSS nativ rendert – ganz ohne Bild, also gestochen scharf und ohne Gewicht.
- Linear – Farben verlaufen entlang einer Geraden. Der Winkel bestimmt die Richtung:
0degist von unten nach oben,90degvon links nach rechts,135degdiagonal. - Radial – Farben verlaufen vom Mittelpunkt aus in Kreisen nach außen, gut für Spotlights und weiche Hintergründe.
Eine dritte Farbstufe erzeugt reichhaltigere, mehrfarbige Übergänge. Wähle nah beieinander liegende Farben für einen dezenten Look oder gegenüberliegende für kräftigen Kontrast – unsere Farb-Tools helfen bei der Wahl.
So nutzt du das CSS
Kopiere die erzeugte Regel und setze sie als Hintergrund eines Elements:
background: linear-gradient(135deg, #3b5bdb, #e64980);
Verläufe funktionieren auf jedem Element mit Hintergrund – Buttons, Karten, Hero-Bereiche – und werden von allen modernen Browsern unterstützt. Alles hier wird lokal im Browser erzeugt.
FAQ
Linear oder radial – was nehmen?
Linear für gerichtete Übergänge (Hintergründe, Buttons); radial für Spotlight- oder Von-innen-nach-außen-Effekte. Du kannst sofort wechseln und beides vorschauen.
Funktionieren Verläufe in allen Browsern?
Ja – linear-gradient() und radial-gradient() werden von allen aktuellen Browsern ohne Präfixe unterstützt.
Ist es kostenlos?
Vollständig kostenlos, ohne Anmeldung, und es läuft komplett im Browser.