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);
}

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

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)

Folha de consulta

Gradientes CSS criam transições suaves entre cores usando a função linear-gradient():

/* Gradiente linear básico de cima para baixo */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

/* Gradiente linear com direção e múltiplas cores */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Direções comuns incluem to bottom, to right, to left e to top.

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>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.