Gradientul in CSS a fost introdus de Webkit dar a fost folosit foarte rad datorita incompatibilitatii cu majoritatea browserelor. Insa in ziua de azi majoritatea browserelor sunt compatibile cu aceasta tehnoca astfel putem creea greadienturi fara a mai fi nevoie sa creem imagini de fundal.

Pentru Webkit

Urmatorul cod este pentru webkit ( Safari, Chrome ). Va afisa un gradient linear de la #ccc sus la #000 jos.
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
Image1

Pentru Firefox 3.6+

background: -moz-linear-gradient(top, #ccc, #000);
Image2

Pentru Internet Explorer

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

Codul CSS Complet

Daca integram toate variantele de mai sus intr-un bloc css avem un gradient pentru toate tipurile de browsere. Codul pleaca de la culoarea de baza pentru browserele care nu suporta gradient.
Put the three lines of code from above together and the result is a cross-browser gradient box. Note: I added a background rule at the very top in case the user is using a browser that doesn’t support the feature.
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
Image4