Gradientes

Parte da seção Domínio do CSS 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:

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

Isso cria um gradiente que vai do laranja (#ff9966) no topo até 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 plano de fundo com gradiente linear. O gradiente deve:

Ir de cima para baixo
Começar com a cor #FFD700 (dourado)
Fazer a transição para #FF4500 (vermelho-alaranjado)

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>