Lineare und radiale Farbverläufe sind seit CSS3 auch ohne Grafiken realisierbar und bieten
allein durch CSS-Anweisungen einen farblich fließenden Übergang, der selbst beim Herranzoomen
kein Pixel-Wirrwarr erzeugt. Außerdem wird dadurch die Downloadzeit verringert.
In den folgenden Beispielen werden wir die beiden verschiedenen Farbverläufe einem DIV als
Hintergrund zuweisen.

Browserunterstützung:

• Firefox
• Safari
• Opera
• Google Chrome
• InternetExplorer (ab Version 10)

Jeder Browser benötigt seine eigene Vorsilbe:

• Firefox: -moz
• Safari, Google Chrome: -webkit-
• Opera: -o
• InternetExplorer: -ms

Farbverläufe unterscheiden sich in 2 Arten:

1. Lineare Verläufe stellen einen geradlinigen Farbverlauf dar und können aus 2 oder mehreren Farben bestehen.
2. Radiale Farbverläufe stellen einen kreisförmigen Farbverlauf zwischen 2 Farben dar.

1. Lineare Verläufe

Einfacher Farbverlauf

.farbverlauf {
background:#6f9c04; /* Genereller Hintergrund */
background:-moz-linear-gradient(top, #fff, #6f9c04); /* Firefox */
background:-webkit-linear-gradient(top, #fff, #6f9c04); /* Safari, Chrome */
background-image: -webkit-gradient(linear, left bottom, 45 45, color-stop(0.1 ,#ffffff), color-stop(1.0 ,#02659e)); /* Safari */
background:-o-linear-gradient(top, #fff, #6f9c04); /* Opera */
background:-ms-linear-gradient(top, #fff, #6f9c04); /* Internet Explorer ab Version 10 */
background:linear-gradient(top, #fff, #6f9c04); /* W3C Standard */
}

Winkel Farbverlauf

.farbverlauf {
background:#6f9c04; /* Genereller Hintergrund */
background:-moz-linear-gradient(left 45deg, #fff, #02659e); /* Firefox */
background:-webkit-gradient(linear, 46% 0%, 12% 100%, from(#02659E), to(#FFFFFF), color-stop(1,#333333)); /* Safari */
background:-o-linear-gradient(left 45deg, #fff, #02659e); /* Opera */
background:-ms-linear-gradient(left 45deg, #fff, #02659e); /* Internet Explorer ab Version 10 */
background:linear-gradient(left 45deg, #fff, #02659e); /* W3C Standard */
}

2. Radiale Verläufe

.farbverlauf {
background:#6f9c04; /* Genereller Hintergrund */
background:-moz-radial-gradient(top, #fff, #c20000; /* Firefox */
background:-webkit-radial-gradient(top, #fff, #c20000); /* Safari, Chrome */
background:-o-radial-gradient(top, #fff, #c20000); /* Opera */
background:-ms-radial-gradient(top, #fff, #c20000); /* Internet Explorer ab Version 10 */
background:radial-gradient(top, #fff, #c20000); /* W3C Standard */
}

Erläuterung:

background:-moz-linear-gradient(top, #fff, #6f9c04);

background: Anweisung für den Hintergrund
-moz: Vorsilbe zur Unterstützung des Firefox-Browsers
-linear: Verlauf wird linear (geradlinig) dargestellt
-gradient: Verlaufsanweisung (gradient -> Verlauf)
top: Folgende Farbangaben werden von oben nach unten dargestellt
#fff, #6f9c04: Farbangaben

Hintergrund:

Es kann vorkommen, dass ältere Versionen, der oben genannten Browser, die CSS3-Verlaufsanweisungen nicht verstehen und somit nicht darstellen können. Die Anweisungen
werden dann einfach überlesen und nur der einfarbige Hintergrund dargestellt.