<gradient>

Resumen

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(), 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(). 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);
    }  

Interpolaci贸n

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))

Especificaci贸n

Especificaci贸n Estado Comentario
CSS Images Module Level 3
La definici贸n de '<gradient>' en esta especificaci贸n.
Candidate Recommendation  

Compatibilidad del navegador

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

Ver tambi茅n