Desde hace algunos años, el uso de degradados en diseño web se ha hecho muy popular, son muchos los diseñadores que usan estos efectos para darle un toque más atractivo a sus trabajos.

Lo más común por ejemplo, es utilizar una imagen de fondo con dos o más colores en degradado y con pocos pixels de ancho para luego, mediante CSS hacer que se repita para dar la impresión de que se trata de una sola imagen.

Bueno, desde que CSS3 se ha empezado a popularizar entre los diseñadores, el uso de imágenes con degradado ha ido dejándose para dar paso a realizarlo directamente con las nuevas propiedades que nos ofrece CSS3, y un claro ejemplo es la imagen que inicia esta entrada, pero para que esto funcione se necesita contar con alguno de estos navegadores: Opera 11.10+, Firefox 3.6+, Safari 5.03+ o Chrome 7+.

En Dev.Opera han preparado una completa guía (en inglés) que nos enseña de forma detallada cómo hacer degradados lineales con CSS3, podremos ver desde degradados transparentes, ángulo de inclinación de los degradados, repetición de degradados lineales y varios ejemplos prácticos.

Enlace: CSS3 linear gradients