Gradientes

Parte da seção CSS Mastery do Journey de HTML da Coddy. Lição 21 de 43.

Gradientes em CSS permitem que você crie transições suaves entre duas ou mais cores.

Vamos começar com um gradiente linear simples:

/* Cria um gradiente linear de cima para baixo */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Isso cria um gradiente que transita do laranja (#ff9966) no topo para uma cor avermelhada (#ff5e62) na parte inferior.

Você também pode especificar a direção e usar várias cores como no exemplo a seguir:

/* Cria um gradiente linear da esquerda para a direita */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Desafio

Fácil

Crie uma regra CSS para uma classe chamada sunset-gradient que aplique um fundo de gradiente linear. O gradiente deve:

Ir de cima para baixo
Começar com a cor #FFD700 (gold)
Fazer a transição para a cor #FF4500 (orangered)

Experimente você mesmo

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