Gradien

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 21 dari 43.

Gradien dalam CSS memungkinkan kamu membuat transisi yang halus antara dua warna atau lebih.

Mari mulai dengan gradien linear sederhana:

/* Buat gradien linear dari atas ke bawah */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

Ini menghasilkan gradien yang berubah dari oranye (#ff9966) di bagian atas menjadi warna kemerahan (#ff5e62) di bagian bawah.

Arah bersifat opsional. Jika kamu tidak menyertakannya, linear-gradient() bergerak dari atas ke bawah, sama seperti to bottom:

background: linear-gradient(#ff9966, #ff5e62); /* dari atas ke bawah */

Kamu juga bisa menentukan arah dan menggunakan beberapa warna seperti pada contoh berikut:

/* Buat gradien linear dari kiri ke kanan */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

Tantangan

Mudah

Buat aturan CSS untuk class bernama sunset-gradient yang menerapkan latar belakang gradien linear. Gradien harus:

Berjalan dari atas ke bawah
Dimulai dengan warna #FFD700 (emas)
Beralih ke #FF4500 (merah-oranye)

Coba sendiri

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