Di bawah ini kita akan membuat cara membuat warna backround gradien saat melakukan scrolling.
Background Gradien
<!DOCTYPE html> <html> <head> <style> body { height: 3000px; background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); } </style> </head> <body> <h1>Ubah Background Gradient Saat Melakukan Scrolling</h1> <h2>Linear Gradient - Top to Bottom</h2> <p> Gradien linier ini dimulai dari atas. Dimulai dengan warna hijau, berubah menjadi biru. </p> <h2 style="position:fixed;">Scroll untuk melihat efeknya.</h2> </body> </html>
Cara Membuat Background Gradien
Buat warna latar belakang gradien linier yang dimulai dari atas. Mulai dari hijau kebiruan / hijau hingga biru:
Langkah 1) Tambahkan HTML:
Contoh
<h2>Linear Gradient - Top to Bottom</h2> <p> Gradien linier ini dimulai dari atas. Dimulai dengan warna hijau, berubah menjadi biru. </p>
Langkah 2) Tambahkan CSS:
Contoh
body {
height: 3000px; /* Digunakan untuk mengaktifkan scrolling */
background: linear-gradient(55deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 85%);
}