linear-gradient erzeugt einen Farbverlauf, und der ist in CSS ein Bild, das der Browser berechnet. Damit lässt er sich überall einsetzen, wo ein Hintergrundbild stehen kann.
- linear-gradient (CSS-Farbverlauf)
Funktion, die einen linearen Farbverlauf erzeugt, den CSS wie ein Bild behandelt.
Beispiel: „Ein linear-gradient steht überall dort, wo ein Hintergrundbild stehen kann.“Auch: Farbverlauf.
Richtung und Haltepunkte
background: linear-gradient(to right, #0078ff, #001c44);
background: linear-gradient(135deg, #f6f9ff 0%, #dbe7ff 60%, #0078ff 100%);Zuerst die Richtung, dann die Farben mit optionaler Position. Ohne Richtung läuft der Verlauf von oben nach unten. Mehr als drei Haltepunkte wirken selten ruhig.
Die harte Kante
Stehen zwei Haltepunkte an derselben Position, entsteht statt eines Verlaufs eine scharfe Grenze. So lassen sich Streifen und zweifarbige Flächen ohne Bilddatei bauen, was für Hintergründe sparsamer ist als jede Grafik.