Gradientes de color lineal

Un degradado lineal se realiza con bandas de color. Pueden ir en horizontal, vertical o formando ángulos. La función CSS para esta crear esta figura de fondo es linear-gradient(). Los argumentos de la función son el ángulo del gradiente y la lista de colores que formarán el degradado.

El ángulo se escribe como una medida, es decir un número seguido de una unidad. La unidad puede ser en grados (deg) o en fracción de una vuelta (turn). También pueden usarse direcciones predefinidas:

• 0deg ess equivalente a 0turn y a  to bottom
• 90deg es equivalente a 0.25turn y a to right
• 180deg es equivalente a 0.5 turn y a to top
• 270deg es equivalente a 0.75tun y a to left

La posición de final de cada color no es obligatoria los colores se repartirían uniformemente, pero puede especificarse mediante una distancia al origen del degradado (si el sentido es to top, el origen es bottom), esta distancia se escribe como un valor absoluto o como un porcentaje de las dimensiones del fondo.

Algunos ejemplos de código

El ángulo se da mediante una medida, es decir un número seguido de una unidad. La unidad puede ser en grados (deg) o en fracción de una vuelta (turn). También pueden usarse direcciones predefinidas:

• 0deg ess equivalente a 0turn y a  to bottom
• 90deg es equivalente a 0.25turn y a to right
• 180deg es equivalente a 0.5 turn y a to top
• 270deg es equivalente a 0.75tun y a to left

Los ejemplos de arriba dan como resultado

Un degradado lineal puede usarse también como un patrón, este patrón se dibuja repetidametne hasta llenar todo el fondo del elemento en que se aplica. Pra logarar este efecto se utiliza la función CSS repeating-linear-gradient(), que utiliza los mismos atributos que linear-gradient(). El ancho del patrón vine dado por la distancia entre el primer color y último color, la diferencia entre las posiciones del primier y último color.