Gradient jest to płynne przejście od jednego koloru do drugiego. Niestety wymaga to od nas pisania kody cztery raz, tylko z innym przedrostkiem aby dla każdej przeglądarki działał poprawnie. Każda przeglądarka ma swój przedrostek. Chrome i safari -webkit; opera -o; mozilla -moz; internet explorer -ms. Przykładowo:
body{
background: -webkit-linear-gradient(top,pink,white);
background: -o-linear-gradient(top,pink,white);
background: -moz-linear-gradient(top,pink,white);
background: -ms-linear-gradient(top,pink,white);
background:linear-gradient(top,pink,white);
}
Efekt:
Aby zmienić wygląd gradientu zeby zamiast poziomy bylo kółko nalezy zmienic jedną wartość - jest to radial zamiast linear. Przykład:
body{
background: -webkit-radial-gradient(top,pink,white,pink);
background: -o-radial-gradient(top,pink,white,pink);
background: -moz-radial-gradient(top,pink,white,pink);
background: -ms-radial-gradient(top,pink,white,pink);
background:radial-gradient(top,pink,white,pink);
}
Efekt:
Można też stworzyć gradient nie dający efektu płynnego przejścia, tylko wyglądającego jak np paski. Przykład:
body{
background: -webkit-repeating-linear-gradient(top,pink 0px,pink 10px,
white 10px,white 20px);
background: -o-repeating-linear-gradient(top,pink 0px,pink 10px,
white 10px,white 20px);
background: -moz-repeating-linear-gradient(top,pink 0px,pink 10px,
white 10px,white 20px);
background: -ms-repeating-linear-gradient(top,pink 0px,pink 10px,
white 10px,white 20px);
background:repeating-linear-gradient(top,pink 0px,pink 10px,
white 10px,white 20px);
}
Efekt: