Degradación de colores CSS

Los degradados o gradientes CSS permiten realizar una transición entre dos o más colores.

Se definen dos tipos de degradados CSS:

  • Degrado lineal: (baja, sube, izquierda, derecha, diagonalmente).
  • Degrado Radial: (definido por el centro).

Degrado Lineal CSS

Para crear un degrado lineal se debe definir al menos dos paradas de color. Las paradas de color son los colores con los que se desea realizar la trama de transición (degrado) entre ellos. Se puede especificar también un punto inicial o ángulo de transición y la dirección del efecto de degradado.

Sintaxis:

background-image: linear-gradient( dirección, color1, color2, ... );

Degradado Lineal: De arriba hacia abajo

Este el valor predeterminado. En el siguiente ejemplo se muestra un degrado lineal que inicia de arriba hacia abajo. Inicia en Rojo y realiza la transición hacia el Amarillo:

.degradago1 {
  background-image: linear-gradient(red, yellow);
}
 

Degradado Lineal: De izquierda a Derecha

El siguiente ejemplo muestra un degradado lineal de inicia de izquierda hacia la derecha. Inicia en Rojo y realiza la transición hacia el Amarillo:

.degradado2 {
  background-image: linear-gradient(to right, red, yellow);
}
 

Degradado Lineal: Diagonalmente

Es posible realizar el degradado diagonalmente especificando las posiciones tanto horizontal como vertical. El siguiente ejemplo muestra un degradado líneal que de la esquina superior izquierda hacia la esquina inferior derecha. Inicia en Rojo y realiza la transición hacia el Amarillo:

.degradado3 {
  background-image: linear-gradient(to bottom right, red, yellow);
}
 

Degrado lineal: Usando Ángulos

Si se desea más control sobre la dirección de el degradado, es posible definir un ángulo, en lugar de las direcciones predefinidas como: to bottom, to top, to right, to left, to bottom right, etc.

Sintaxis:

background-image: linear-gradient( ángulo, color1, color2 );

El ángulo es especificado como un ángulo entre una línea horizontal y la línea de degrado. En el siguiente ejemplo se muestra como usar ángulo en el degradado lineal:

#degradado4 {
  background-image: linear-gradient( -90deg, red, yellow );
}
 

Múltiples paradas de color

Es posible especificar múltiples paradas de color. En el siguiente ejemplo se muestra un degradado lineal de arriba hacia abajo con múltiples paradas de color:

#degradado5 {
  background-image: linear-gradient( red, yellow, green );
}
 

En el siguiente ejemplo se muestra como crear un degrado lineal de izquierda a derecha con múltiples colores:

#degradado6 {
  background-image: gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
 

Transparencia

Los degradados CSS también soporta transparencia, lo cual puede ser usado para crear efectos de desvanecimiento. Para agregar transparencia, es necesario usar la función rgba() para definir las paradas de color. El último parámetro en la función rgba() puede ser un valor desde 0 a 1, y esto define la transparencia de el color: 0 indica transparencia total, 1 indica color total (sin transparencia).

En el siguiente ejemplo de degrado lineal que inicia desde izquierda. Inicia con transparencia total y realiza la transición a color completo (sin transparencia):

#degradado7 {
  background-image: linear-gradient( to right, rgba(255,0,0,0), rgba(255,0,0,1) );
}
 

Degradado lineal repetidamente

La función repeating-linear-gradient() es usado para repetir el degradado:

#degradado8 {
  background-image: repeating-linear-gradient( red, yellow 10%, green 20% );
}
 

Degradado Radial CSS

Un degradado radial es definido por su centro. Para crear un degrado radial se debe definir al menos dos paradas de color.

Sintaxis:

background-image: radial-gradient( forma_tamaño_posición, primer_color, ..., último_color );

Los valores predeterminados son:

  • Forma:ellipse
  • Tamaño: farthest-corner
  • Posición: centro.

Degradado Radial: Paradas de color uniformemente espaciados

Predeterminadamente el espaciado de las paradas de color es uniforme. En el siguiente ejemplo se muestra un degradado radial predeterminado:

degradado9 {
  background-image: radial-gradient(red, yellow, green);
}
 

Degradado Radial: Paradas de color diferentemente espaciados

El siguiente ejemplo muestra un degrado radial con diferentes espaciados para las paradas de color:

#degrada10 {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
 

Establecer la Forma

El parámetro shape define la forma. Esta pueda tomar los valores de circle o ellipse. El valor predeterminado es ellipse. El siguiente ejemplo muestra un degradado radial con la forma de un circulo.

#degrado11 {
  background-image: radial-gradient(circle, red, yellow, green);
}
 

Diferentes Claves para el Tamaño

El parámetro size define tamaño del degradado. Este puede tomar cuatro valores:

  • closest-side
  • farthest-side
  • closet-corner
  • farthest-corner
#degradado12 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#degradado13 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
 
 

Degradado Radial repetidamente

La función repeating-radial-gradiant() es usado para repetir un degrado radial: 

#degradado14 {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
 

Propiedades de degradados CSS

La siguiente tabla lista las propiedades de degradados CSS:

Propiedas Descripción
background-image Especifica una o más imágenes de fondo para un elemento.