Gradienty w CSS3 nie są czymś nowym ale z powodu niezgodności z różnymi przeglądarkami nie były wykorzystywane. Na szczęscie wraz z pojawianiem się nowszych wersji przeglądarek ten problem został już usunięty. W chwili obecnej gradienty w CSS3 można użyskać w przeglądarkach Safari, Chrome (WebKit) oraz Mozilla Firefox (od wersji 3,6).

W tym poście pokażę jak używać gradientów CSS dla dominujących przeglądarek.

Ale zanim zaczniemy najpierw zastanowimy się dlaczego warto używać gradientów z CSS3?

1. Gradienty w CSS umożliwiają ograniczenie ilościładowanej grafiki, już nie trzeba ładować obrazka by uzyskać przejście kolorów.

2. Mniej obrazków to mniej zapytań HTTP.

3. Gradienty są skalowane.

Podstawowa składnia używania gradientów linowych to:

background: linear-gradient( pozycja początkowa,  kolor początkowy , kolor końcowy); 

W zależności od przeglądarki kod odpowiedzialny za gradient jest inny.

Dla przeglądarek Safari 4+ i Chrome

background: -webkit-gradient(linear, top, from(#000000), to(#ffffff));

Dla przeglądarek Safari 5.1+ i Chrome 10+ iOS 5+

background: -webkit-linear-gradient(top, #000000, #ffffff);

Dla przeglądarek FireFox 3.6+

background: -moz-linear-gradient(top, #000000, #ffffff);

Dla przeglądarek IE 10

background: -ms-linear-gradient(top, #000000, #ffffff);

Dla przeglądarek Opera 11.10+

background: -o-linear-gradient(top, #000000, #ffffff);

Dla przeglądarek IE6-IE9

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

Oraz składnia, która ma być dostępna jak już standardy będą ujednolicone (tak mi się wydaje)

background: linear-gradient(to bottom, #000000, #ffffff);

Gotowy kod dla wyżej wymienionych przeglądarek.

.box_gradient{
background: -webkit-gradient(linear,top, from(#000000), to(#ffffff)); 
background: -webkit-linear-gradient(top, #000000, #ffffff); 
background:-moz-linear-gradient(top, #000000, #ffffff); 
background:-ms-linear-gradient(top, #000000, #ffffff);  
background:-o-linear-gradient(top, #000000, #ffffff); 
background:linear-gradient(to bottom, #000000, #ffffff); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000', EndColorStr='#ffffff');
}