Di sebagian negara Asia Tenggara termasuk Indonesia, browser UC Browser masih punya pangsa pasar yang tidak sedikit menurut data StatCounter — browser berbasis mesin WebKit lama yang membuat perhatian pada dukungan gradien CSS lintas-browser masih relevan, bukan sekadar isu masa lalu.
Tiga cara CSS menyebarkan warna
linear-gradient(45deg, red, blue) merentangkan warna sepanjang garis lurus pada sudut tertentu — jenis paling umum untuk latar tombol, banner, dan kartu. radial-gradient(circle, yellow, orange) menyebarkan warna dalam lingkaran atau elips konsentris dari sebuah titik ke luar, cocok untuk efek sorotan cahaya. conic-gradient(red, yellow, green, blue, red) memutar warna di sekitar titik pusat seperti jarum jam, dan menjadi satu-satunya jenis yang bisa membuat diagram lingkaran atau indikator progres cincin tanpa grafik tambahan.
Color stops dan pola berulang
Setiap warna bisa dijangkarkan pada posisi persentase tertentu, misalnya linear-gradient(red 0%, yellow 50%, blue 100%), untuk mengatur seberapa tiba-tiba transisi terjadi. Fungsi repeating-linear-gradient() dan repeating-radial-gradient() mengulang urutan color stops yang sama secara otomatis, menghasilkan pola garis atau papan catur hanya dengan satu baris CSS.
Mengapa ini dibutuhkan
- Dengan cepat memilih dan menyalin kode CSS gradien siap pakai tanpa menyetel sudut dan warna secara manual.
- Memahami jenis gradien mana yang cocok untuk efek visual tertentu.
- Menyetel posisi color stops secara presisi untuk transisi yang diinginkan.
Kenapa gradien CSS, bukan gambar
Karena gradien CSS dirender langsung oleh browser tanpa file gambar tambahan, ia tidak menambah satu pun permintaan HTTP ke server — hal yang cukup berarti di negara kepulauan seperti Indonesia, di mana kecepatan dan stabilitas koneksi seluler masih sangat bervariasi antar wilayah, dari Jakarta hingga daerah dengan jaringan 3G. Latar belakang gradien via CSS tetap ringan dan konsisten tanpa bergantung pada seberapa cepat gambar berhasil diunduh.