Gradient adalah gradasi warna: perpindahan mulus dari satu warna ke warna lain, kayak langit senja yang pelan-pelan berubah dari jingga ke ungu. Di CSS, gradient itu gambar yang digambar browser, jadi dipasang di background. Gak perlu file gambar atau aplikasi desain.
🧪 Tebakan cepat:
background-color: linear-gradient(blue, purple)jalan gak? Tebak dulu, jawabannya ada di bagian "Gradien lurus denganlinear-gradient()".
Gradien lurus dengan linear-gradient()
.banner {
background: linear-gradient(to right, orange, deeppink);
}
backgroundadalah tempat gradient dipasang. Boleh jugabackground-image.linear-gradient( ... )adalah function: nama, lalu tanda kurung berisi masukan yang dipisah koma. Function ini menggambar gradasi dalam garis lurus.to rightadalah arahnya: mulai dari kiri, berakhir di kanan.orange, deeppinkadalah warna awal dan warna akhir.
Hasilnya, banner oranye di sisi kiri yang pelan-pelan berubah jadi pink di sisi kanan.
Jawaban tebakan: gak jalan. background-color cuma menerima satu warna, sedangkan gradient itu gambar. Browser membuang baris itu, jadi latarnya tetap polos.
Mengatur arah
Arah ditulis paling depan, sebelum warna, dan dipisah koma. Kalau arahnya gak ditulis, gradient jalan dari atas ke bawah:
background: linear-gradient(blue, purple); /* biru di atas, ungu di bawah */
background: linear-gradient(to right, red, blue); /* merah di kiri, biru di kanan */
background: linear-gradient(90deg, red, blue); /* sama dengan to right */
background: linear-gradient(to right, red, yellow, green);
to right,to left,to top,to bottommenunjuk sisi tujuannya.to bottom rightbikin arah miring.- Arah juga bisa ditulis sebagai sudut:
90degsama denganto right,180degsama denganto bottom. - Warnanya boleh lebih dari dua. Baris terakhir jalan dari merah, ke kuning, lalu hijau.
Gradien melingkar dengan radial-gradient()
.lingkaran {
background: radial-gradient(white, blue);
}
radial-gradient() mulai dari titik tengah lalu menyebar ke luar. Warna pertama ada di tengah, warna terakhir di tepi. Hasilnya, tengahnya putih dan makin ke pinggir makin biru, kayak bola yang kena cahaya. Bentuk bawaannya elips yang mengikuti kotaknya, jadi di kotak persegi bentuknya lingkaran.
Ada juga conic-gradient(): warnanya berputar mengelilingi titik tengah, kayak diagram lingkaran. Coba ketiganya di Lab.
⚠️ Jebakan yang sering ketemu
- Lupa koma.
linear-gradient(to right red, blue)gak valid. Arah dan tiap warna dipisah koma. - Nama function kebalik.
gradient-linear()gak ada. Yang adalinear-gradient(),radial-gradient(), danconic-gradient(). - Teks putih di atas gradient terang. Bagian yang terang bikin teks susah dibaca. Pilih warna yang cukup gelap di belakang teksnya.
TL;DR: Gradient adalah gambar gradasi warna yang dipasang di background, bukan di background-color. linear-gradient(blue, purple) jalan lurus dari atas ke bawah. Tambah arah di depan buat mengubahnya: to right atau 90deg dari kiri ke kanan. radial-gradient(white, blue) menyebar dari tengah: warna pertama di tengah, warna terakhir di tepi.
