CSS3 Farbverlauf (Gradient)

So wie der Hintergrund eines Elements als Farbe in CSS deklariert werden kann, kann der  Hintergrund auch als Verlauf deklariert werden. Gradients in CSS zu deklariert wirkt sich positiv auf die Ladezeit aus.

Der Stil background-image:gradient errechnet einen Verlauf ohne Bild. Browsern können Diesen Verlauf für background-image (IE ab version 10) und border-image(IE ab version 11) eingesetzen.

Linear Gradients (bottom/up/left/right/diagonally (deg))
Radial Gradients (definiert ab ihrem center)

Linear Gradient

background-image: linear-gradient(salmon, pink);

background-image: linear-gradient(Salmon 10%, pink 50%, pink 75%, Salmon 90%);

background-image: linear-gradient(to right, turquoise, pink);

background-image: linear-gradient(to top left, turquoise, pink);

background: linear-gradient(45deg, pink, turquoise);

background-image: linear-gradient(green, turquoise, pink, orange);

background-image: linear-gradient(45deg, pink 20%, white, orange 80%);

Transparenz

background-image: linear-gradient(orange , rgba(255, 255, 255, .0));

Radial Gradient

closest-side
farthest-side
closest-corner
farthest-corner

background-image:radial-gradient(pink, azure);

background-image:radial-gradient(circle, white 20%, turquoise 90%);

background-image:radial-gradient(circle closest-side, white 20%, turquoise 90%); 

background-image: radial-gradient(circle closest-side at 60% 80%, white 20%, salmon 90%); 

background: radial-gradient(circle farthest-corner, salmon 0%, black 25%, white);

background: radial-gradient(circle closest-corner at 80% 0%, salmon, black, white);

Repeating Gradient

background: repeating-radial-gradient(circle closest-side,   salmon 0%, pink 5%, white 10%, pink 15%, red 20%);

background: repeating-linear-gradient(to left top, salmon 2px, orange 20px, pink 50px);

Syntax für Gradient

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

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.