CSS-Farbverlauf-Generator
Wählen Sie Farben und einen Winkel, sehen Sie die Vorschau und kopieren Sie das background-CSS.
CSS-Farbverlauf online erstellen
Farbverläufe als Hintergrund kommen in Hero-Bereichen, Buttons, Karten und Überlagerungen auf Fotos zum Einsatz. Diese Seite öffnet den CSS-Generator auf seinem Reiter für Farbverläufe, sodass Sie Winkel und Farben nach Augenmaß ausprobieren und die exakte CSS-Zeile kopieren können.
Beispiele
| CSS | Ergebnis |
|---|---|
linear-gradient(90deg, #6c5ce7 0%, #00b894 100%) | Links Lila, rechts Grün |
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) | Dunkler Verlauf am unteren Rand, damit Text auf einem Foto lesbar bleibt |
radial-gradient(circle, #ffffff 0%, #dfe6e9 100%) | Weicher heller Fleck in der Mitte |
conic-gradient(from 0deg, #e17055 0% 25%, #0984e3 25% 100%) | Ein Tortendiagramm mit einem Viertel |
Tipps
Farben, die im Farbkreis nahe beieinander liegen, gehen weich ineinander über; gegenüberliegende Farben werden in der Mitte oft grau, was eine zusätzliche Farbe dazwischen behebt. Denken Sie an den Textkontrast: Prüfen Sie den hellsten und den dunkelsten Teil des Verlaufs gegen die Textfarbe.
Verwandte Werkzeuge
Für Schatten unter demselben Element siehe den Box-Shadow-Generator. Um eine Farbe nach HEX, RGB oder HSL umzurechnen, nutzen Sie den Farbkonverter.