<gradient>

El tipo de datos CSS <gradient> indica un tipo de <image> que consiste de una transición progresiva entre dos o más colores (Degradado).

Un gradiente de CSS no es un <color> pero tampoco es una imagen con dimensiones intrínsecas; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.

Funciones de las Gradientes

Hay tres tipos de gradientes de color:

• Linear gradients(gradiente lineal), generados por la función linear-gradient() (en-US), donde el color se desvanece suavemente a lo largo de una línea imaginaria.

  A rainbow made from a gradient
  

  body {
  background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
  }

• Radial gradient (gradientes radiales), generados por la función radial-gradient() (en-US). Cuanto más lejos de un origen sea un punto, más lejos del color original será.

  Radial gradient
    

  body {
  background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
  }
  

• Repeating gradient (gradientes de repetición), donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja.

  Repeating gradient
  

  body {
  background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
  background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
  }  

Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando.  (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "transparent " del inglés transparente ( para más información hacer clic en el link))

Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.

• Usando Gradientes CSS, <gradient>, linear-gradient() (en-US), radial-gradient() (en-US), repeating-linear-gradient() (en-US), repeating-radial-gradient() (en-US)