En un degradado lineal, los colores fluyen en una sola dirección, por ejemplo, de izquierda a derecha, de arriba a abajo o en cualquier ángulo que elija.
Sintaxis
Para crear un degradado lineal, debe definir al menos dos paradas de color. Son los colores entre los que se crean las transiciones. Se declara en las propiedades background o background-image .
background: linear-gradient(direction, colour-stop1, colour-stop2, ...);Si no se especifica ninguna dirección, la transición predeterminada es de arriba a abajo.
Ejemplos
De arriba hacia abajo:
background: linear-gradient(red, yellow);
Para Izquierda r ight:
Para hacerlo de izquierda a derecha, agrega un parámetro adicional al comienzo del linear-gradient()comienzo con la palabra a la que indica la dirección:
background: linear-gradient(to right, red , yellow);
Gradientes diagonales :
También puede realizar la transición de un degradado en diagonal especificando las posiciones de inicio horizontal y vertical, por ejemplo, superior izquierda o inferior derecha.
Aquí hay una muestra de un gradiente que comienza desde la parte superior izquierda:
background: linear-gradient(to bottom right, red, yellow);
Usar ángulos para especificar la dirección del degradado
También puede usar ángulos, para ser más precisos al especificar la dirección del gradiente:
background: linear-gradient(angle, colour-stop1, colour-stop2);El ángulo se especifica como un ángulo entre una línea horizontal y la línea de degradado.
background: linear-gradient(90deg, red, yellow);
Usando más de dos colores
No está limitado a solo dos colores, puede usar tantos colores separados por comas como desee.
background: linear-gradient(red, yellow, green); 
También puede utilizar otras sintaxis de color como códigos RGB o hexadecimales para especificar los colores.
El color duro se detiene
No solo puede usar degradados para hacer la transición con colores que se desvanecen, sino que también puede usarlos para cambiar de un color sólido a otro color sólido al instante:
background: linear-gradient(to right,red 15%, yellow 15%);
Más información:
- El manual de CSS: una guía práctica de CSS para desarrolladores