Teoría
Teoría

La dirección del degradado

La dirección de un degradado se indica con las palabras clave top, bottom, left, right.

La dirección se escribe antes de la lista de colores e incluye la palabra clave to. Se añadió a la sintaxis para que resultara más clara y fácil de leer:

background-image: linear-gradient(to right, yellow, green);

Así se entiende de inmediato: «Un degradado de amarillo a verde, de izquierda a derecha».

Estos son algunos ejemplos de distintas direcciones con los colores yellow, green:

`to right`
`to left`
`to bottom`
`to top`

Ahora practica por tu cuenta con las distintas direcciones de los degradados.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>La dirección del degradado</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <h1>¡Hola, linear-gradient!</h1> </div> </body> </html>

CSS

html, body { margin: 0; height: 100%; } .content { height: 100%; background-color: yellow; background-image: none; /* Colores del degradado: yellow, green */ } h1 { margin: 0; padding-top: 250px; text-align: center; font-size: 30px; font-family: "Georgia", serif; }

ObjetivosRealizado

Asigna a .content un degradado de amarillo a verde con estas direcciones:

de izquierda a derecha
de derecha a izquierda
de arriba hacia abajo
de abajo hacia arriba