Degradados

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 21 de 43.

Los degradados en CSS te permiten crear transiciones suaves entre dos o más colores.

Empecemos con un degradado lineal sencillo:

/* Crea un degradado lineal de arriba abajo */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Esto crea un degradado que pasa del naranja (#ff9966) en la parte superior a un color rojizo (#ff5e62) en la parte inferior.

La dirección es opcional. Si la omites, linear-gradient() va de arriba hacia abajo, igual que to bottom:

background: linear-gradient(#ff9966, #ff5e62); /* de arriba abajo */

También puedes especificar la dirección y usar varios colores, como en el siguiente ejemplo:

/* Crea un degradado lineal de izquierda a derecha */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Desafío

Fácil

Crea una regla CSS para una clase llamada sunset-gradient que aplique un fondo con degradado lineal. El degradado debe:

Ir de arriba hacia abajo
Empezar con el color #FFD700 (dorado)
Pasar a #FF4500 (rojo anaranjado)

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <style>
    .sunset-gradient {
      border: 3px solid black;
      height: 300px;
      width: 100%;
       /* Write your CSS rule here */
       
       
    }
  </style>
</head>
<body>
  <div class="sunset-gradient"></div>
</body>
</html>