CSS3 Linear Gradients

Con CSS3 Gradients podemos visualizar en los navegadores modernos transiciones suaves entre dos o más colores especificados.

Anteriormente, se tenía que utilizar imágenes para conseguir estos efectos. Sin embargo, mediante el uso de los Linear Gradients de CSS3 se puede reducir el tiempo de carga y el uso de ancho de banda. Además, los elementos con los gradients se ven mejor cuando se hace zoom, ya que el gradient es generado por el navegador.

CSS3 define dos tipos de gradientes:

• Degradados lineales (abajo / arriba / izquierda / derecha / diagonal)
• Degradados radiales (definido por su centro)

Navegadores:

• Funciona en Internet Explorer 10 +, Firefox 16 +, Chrome 26 + y Opera 12.1 +.
• Para Safari 5.1 + requiere el prefijo-webkit-.
• Para Chrome 10 a 25 requiere el prefijo-webkit-.
• Para Opera 11,1-12,0 requiere el prefijo-O-.
• Firefox 3,6-15 requieren el prefijo-moz-.
• Internet Explorer 9 y versiones anteriores no son compatibles con gradients.

Puede generar degradados fácilmente con Ultimate CSS Gradient Generator

Ver un ejemplo en funcionamiento