background-color está muy bien. Cumple. Hace su trabajo. Pero hay un momento en todo curso de CSS en el que alguien mira su caja de color sólido y piensa: "sí... pero quiero algo con más drama".
Ese momento ha llegado.
Los gradientes te permiten mezclar colores de forma progresiva. En lugar de un único fondo plano, obtienes una transición visual mucho más rica.
Se puede crear con background-image:
Esto significa:
linear-gradient(...) crea un gradiente linealto right hace que vaya de izquierda a derechapurple, pink son los colores entre los que se hace la transiciónbackground-image?Pregunta legítima. Un gradiente no es exactamente un color plano. CSS lo trata como una imagen generada por el navegador. No es una foto real, pero se comporta como un fondo de ese tipo.
Sí, CSS a veces tiene estas decisiones que al principio suenan extrañas. Luego te acostumbras. Luego empiezas a defenderlas. Luego ya no hay vuelta atrás.
Haz que .hero tenga este fondo:
De pronto, tu caja parece portada de algo importante...