Sfumature

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 21 di 43.

I gradienti in CSS ti permettono di creare transizioni fluide tra due o più colori.

Iniziamo con un semplice gradiente lineare:

/* Crea un gradiente lineare dall'alto verso il basso */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Questo crea un gradiente che passa dall'arancione (#ff9966) in alto a un colore rossastro (#ff5e62) in basso.

Puoi anche specificare la direzione e usare più colori, come nell'esempio seguente:

/* Crea un gradiente lineare da sinistra a destra */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Sfida

Facile

Crea una regola CSS per una classe chiamata sunset-gradient che applichi uno sfondo con gradiente lineare. Il gradiente deve:

Andare dall'alto verso il basso
Iniziare con il colore #FFD700 (oro)
Passare a #FF4500 (rosso-arancione)

Provalo tu

<!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>