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