MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Sumario

El tipo de datos <gradient> CSS indica un CSS <image> hecho por una transición progresiva entre dos o más colores (Degradado). Un gradiente de CSS no es un CSS <color> pero tampoco hay 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.

 

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.
    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á.
    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.
    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. 

Especificación

Especificación Estado Comentario
CSS Image Values and Replaced Content Module Level 3
The definition of '<gradient>' in that specification.
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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Sebastianz, wizAmit, slayslot, Conradin88
 Última actualización por: Sebastianz,