Ein „CSS Gradient“ ist eine Methode, um Hintergrundfarben auf einer Webseite zu gestalten, bei der die Farben fließend von einer zur anderen übergehen. Es ist wie ein Farbverlauf. Es kann gerade Linien oder runde Kreise erzeugen, die Farben miteinander vermischen. Dies wird in der Webentwicklung verwendet, um Webseiten hübscher zu machen, indem man Farbübergänge erstellt, ohne Bilder zu verwenden.
Man muss zwischen zwei Arten von Farbverläufen unterscheiden:
Lineare Verläufe, geradliniger Farbverlauf von zwei oder mehr Farben
background:-moz-linear-gradient(top,#fff,#adf);/* Firefox */
background:-webkit-linear-gradient(top,#fff,#adf);/* Safari, Chrome */
background:-o-linear-gradient(top,#fff,#adf);/* Opera */
background:-ms-linear-gradient(top,#fff,#adf);/* IE */
background:linear-gradient(top,#fff,#adf);/* W3C Standard */Radiale Verläufe, kreisförmiger Farbverlauf von zwei oder mehr Farben
background:-moz-radial-gradient(center,#fff,#adf);/* Firefox */
background:-webkit-radial-gradient(center,#fff,#adf);/* Safari, Chrome */
background:-o-radial-gradient(center,#fff,#adf);/* Opera */
background:-ms-radial-gradient(center,#fff,#adf);/* IE */
background:radial-gradient(center,#fff,#adf);/* W3C Standard */linear-gradient, radial-gradient und conic-gradient sind Werte für background-image, border-image, list-style-image und generated content.
Es gibt drei Formen des CSS-Gradient:
- Der lineare gerade Verlauf von oben nach unten oder von einer Seite zur anderen,
- radialer Verlauf oder radial Gradient vom Rand zur Mitte des Elements (z.B. Zielscheibe),
- konischer Verfauf