La técnica de creación de degradado que vamos a ver sólo funciona en Mozilla y Webkit. Para variar Internet Explorer todavía no da soporte a esta opción de CSS3, pero con el tiempo (más tarde que temprano) esta opción será compatible con todos los navegadores.

A diferencia de otras opciones de CSS3, en esta ocasión la sintáxis de Mozilla y Safari/Chrome para los degradados difiere un poquito. Así que vamos a ver como hacerlo primero con Mozilla y luego con Webkit.

Mozilla

La sintáxis para Firefox es la siguiente

-moz-linear-gradient( [ || <ángulo>,]? ,  [, ]* )

Que aunque puede parecer complicada es realmente sencilla. Veamos un ejemplo, si deseamos un degradado de negro a blanco desde arriba, escribimos

background: -moz-linear-gradient(top, black, white);

Webkit

La sintáxis de Webkit, válida para Chrome y Safari, es la siguiente.

-webkit-gradient(,  [, ]?,  [, ]? [, ]*)

Es un poco más compleja pero a la vez más potente que la de Mozilla. En este caso, para generar el mismo degrado de antes escribiríamos,

background: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));

Básicamente lo que le decimos es que haga un degradado lineal, desde el punto 0 0 (que es la esquina superior izquierda) hasta el punto 0 100% (que es la esquina inferior izquierda) desde el color negro al color blanco.

Degradados más complejos

Y digamos que necesitamos crear degradados más complejos. Por ejemplo, el típico degradado que se realiza el principio y luego mantiene el mismo colos hasta el final de la página. Para eso es para lo que se utilizan los stops.

Digamos que queremos crear un degradado de negro a blanco en los primeros 40 pixels, y el resto hasta el final en blanco. La forma de hacerlo sería;

background: -moz-linear-gradient(top, black, white 40px); 
 background: -webkit-gradient(linear, 0 0, 0 10%, from(black), to(white));

Mi consejo es que utilicéis esta técnica siempre que podáis. Da igual si no se ve igual en Internet Explorer. Lo mejor es en estos casos, y siempre que sea viable para el diseño, poner un fondo de color fijo.

En la demo de este artículo se puede ver en funcionamiento, evidentemente si estáis usando Explorer no vais a ver nada...