Gradiente de CSS

Fondo de desvanecimiento

Los gradientes CSS le permiten mostrar una transición suave entre dos o más colores especificados.

CSS define dos tipos de gradientes:

  • Gradiente lineal((hacia abajo/hacia arriba/hacia la izquierda/hacia la derecha/diagonal))
  • Gradiente radial((definido por su centro))

Gradiente lineal CSS

Para crear un gradiente lineal, debe definir al menos dos marcadores de color. Los marcadores de color son los colores que desea presentar con una transición suave. También puede configurar el punto de partida y la dirección (o ángulo) y el efecto degradado.

Sintaxis

background-image: linear-gradient(dirección, color-stop1, color-stop2, ...);

Gradiente lineal - de arriba hacia abajo (por defecto)

El siguiente ejemplo muestra un gradiente lineal que comienza desde la parte superior. Comienza en rojo y se transita a amarillo:

Desde arriba a abajo (por defecto)

Ejemplo

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

Prueba personalmente

Desvanecimiento lineal - Desde la izquierda a la derecha

El siguiente ejemplo muestra un desvanecimiento lineal que comienza desde la izquierda. Comienza en rojo y transita a amarillo:

Desde la izquierda a la derecha

Ejemplo

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

Prueba personalmente

Desvanecimiento lineal - Diagonal

Puede especificar las posiciones de inicio horizontal y vertical para lograr un desvanecimiento diagonal.

El siguiente ejemplo muestra un desvanecimiento lineal que comienza en la esquina superior izquierda (hasta la esquina inferior derecha). Comienza en rojo y transita a amarillo:

Desde la esquina superior izquierda a la inferior derecha

Ejemplo

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

Prueba personalmente

Uso de ángulo

Si desea tener más control sobre el ángulo del desvanecimiento, puede definir un ángulo para reemplazar las direcciones predefinidas (abajo, arriba, a la derecha, a la izquierda, a la derecha-abajo, etc.). El valor 0deg es igual a 'hacia arriba' (to top). El valor 90deg es igual a 'hacia la derecha' (to right). El valor 180deg es igual a 'hacia abajo' (to bottom).

180deg

Sintaxis

background-image: linear-gradient(angle, color-stop1, color-stop2);

Este ángulo especifica el ángulo entre la línea horizontal y la línea del desvanecimiento.

El siguiente ejemplo muestra cómo usar un ángulo en el desvanecimiento lineal:

Ejemplo

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

Prueba personalmente

Uso de múltiples puntos de color

El siguiente ejemplo muestra un desvanecimiento lineal con múltiples puntos de color (de arriba a abajo):

Ejemplo

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

Prueba personalmente

El siguiente ejemplo muestra cómo crear un desvanecimiento lineal (de izquierda a derecha) utilizando colores del arco iris y texto:

Fondo de desvanecimiento

Ejemplo

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

Prueba personalmente

Uso de transparencia

CSS también admite transiciones de transparencia y se puede usar para crear efectos de desvanecimiento.

Para agregar transparencia, utilizamos la función rgba(). El último parámetro de la función rgba() puede ser un valor entre 0 y 1, que define la transparencia del color: 0 significa completamente transparente, 1 significa completamente coloreado (sin transparencia).

El siguiente ejemplo muestra un gradiente lineal que comienza desde la izquierda. Comienza completamente transparente y luego transita a un rojo completo:

Ejemplo

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

Prueba personalmente

Gradiente lineal repetido

repeating-linear-gradient() La función se utiliza para el gradiente lineal repetido:

Ejemplo

Gradiente lineal repetido:

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

Prueba personalmente