Градиенты

Часть раздела Мастерство CSS путешествия по HTML на Coddy. Урок 21 из 43.

Градиенты в CSS позволяют создавать плавные переходы между двумя или более цветами.

Начнём с простого линейного градиента:

/* Создайте линейный градиент сверху вниз */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Это создаёт градиент, который переходит от оранжевого цвета (#ff9966) вверху к красноватому цвету (#ff5e62) внизу.

Направление указывать необязательно. Если его не указать, linear-gradient() будет идти сверху вниз, как и to bottom:

background: linear-gradient(#ff9966, #ff5e62); /* сверху вниз */

Вы также можете указать направление и использовать несколько цветов, как в следующем примере:

/* Создайте линейный градиент слева направо */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Задание

Легко

Создай правило CSS для класса с именем sunset-gradient, которое задаёт линейный градиент в качестве фона. Градиент должен:

Переходить сверху вниз
Начинаться с цвета #FFD700 (золотой)
Переходить к цвету #FF4500 (оранжево-красный)

Попробуйте сами

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