CSS3 Farbverlauf (Gradient)

Der Stil background-image:gradient errechnet einen Verlauf ohne Bild.
Gradient hat in allen Browsern dieselbe Syntax , das Browser-Präfix (-webkit, -moz, -ms, -o) muss leider noch vorangesetzt werden. Webkit-basierte Browsern können Gradient für background-image und border-image eingesetzen, Firefox nur für background-image.

Syntax für Gradient

background: linear-gradient(left, #fff 0%, #000 50%);

Wichtig: Zwischen linear-gradient und der Klammer darf kein Leerzeichen stehen, Browser ignorierenin diesen Fall den Style.

Browser Syntax

Alle Browser brauchen zur Zeit noch einen Prefix um den Verlauf richitg darzustellen.

background: -moz-linear-gradient(left, #fff 0%, #000 50%);
background: -webkit-linear-gradient(left, #fff 0%, #000 50%);
background: -o-linear-gradient(left, #fff 0%, #000 50%);

IE-8 - IE10

IE10 Internet Explorer unterstützt CSS gradient ab Version 10 mit dem Präfix.

background: -ms-linear-gradient(left, #fff 0%, #000 50%);

IE-9 Internet Explorer bis und mit Version 8 brauchen einen Filter. Dieser Filter unterstützt aber nur Horzontale und vertikale verläufe.

filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);

filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr='#ffffff', endColorstr='#000000');

Mit GradientType=1 beginnt der Verlauf links, ohne startet der Verlauf oben.

Beispiele

background: linear-gradient(left, #fff 0%, #000 50%);

background: linear-gradient(left, #fff 61%, #000 88%);

background: linear-gradient(top, #fff 0%, #000 100%);

background: linear-gradient(65deg, #fff 3%, #000 100%);

background: linear-gradient(left, green, yellow, red);

background: linear-gradient(65deg, #000, #FFF, #Ff0);

background:radial-gradient(center, #fff, #9cc); 

background:radial-gradient(top left, #fff, #9cc);

background:radial-gradient(center, circle, #fff 20%, #9cc 100%);

background: radial-gradient(center, circle farthest-corner, 
#fcf 0%, #000 25%, #fff 95%);

background: radial-gradient(left top, circle farthest-side, 
#fcf 0%, #000 25%, #fff 75%);