Fondo degradado con CSS3

Los navegadores que soportan css3 o aquellos con sus propias herramientas (como -webkit- de Opera o -moz- de Firefox) pueden generar un color en gradiente, útil por ejemplo para crear un fondo degradado.

La solución clásica era usar una imagen de fondo como explica en el post crear un fondo degradado con css. Con la instrucción de gradiente en css3 se puede seguir especificando la imagen de fondo para aquellos navegadores que no soportan css3 y, buenas noticias, los navegadores que soportan css3 no descargarán la imagen!! Lo que se traduce en menos solicitudes http, menos peso de descarga y, por tanto, la velocidad de carga de tu web será un poco más rápida.

Veamos unos ejemplos

#degradado1 {
    height: 100px;
    background-image: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7) !important; /* Firefox */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)) !important;  /* Webkit: Chrome, Opera,... */
    background-image: url(images/linear_bg_1.png); /* Navegadores sin CSS3 */
    background-color: #1a82f7; /* Navegadores sin CSS3 */
    background-​​image: linear-gradient(left , #1a82f7, #2F2727 ); /* CSS3 puro */
 }

#degradado2 {
    height: 100px;
    background-color: #1a82f7; /* Navegadores sin CSS3 *
    background-image: url(images/linear_bg_2.png); /* Navegadores sin CSS3 */
    background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7); /* Firefox */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); /* Webkit: Chrome, Opera,... */
    background-​​image: linear-gradient(top , #1a82f7, #2F2727 ); /* CSS3 puro */
}

#degradado-radial {
    width: 100px;
    height: 100px;
    background-image: url(images/radial_bg.png); /* Navegadores sin CSS3 */
    background-position: center center; /* Navegadores sin CSS3 */
    background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #2F2727 0%, #1a82f7 100%); /* Firefox */
    background-image: -webkit-gradient(radial, center center, 10, center center, 80, from(#1a82f7), to(#2F2727)); /* Webkit: Chrome, Opera,... */
    background-image: radial-gradient(center center, circle closest-side, #1a82f7, #2F272); /* CSS3 puro */
 }

Os dejo herramientas en las que podéis elegir colores, posiciones, y todas las opciones para crear un fondo degradado con CSS3, tanto lineal como radial:

• Generador de CSS para gradientes lineales
• Generador de CSS para gradientes radiales

Nota: en el momento de escribir este post lineal-gradient y radial-gradient no están totalmente implementados en CSS3 y por ello es recomendable utilizar siempre las versiones moz y webkit para asegurar la compatibilidad.