Perpindahan warna yang halus — dari biru tua di kiri ke biru muda di kanan, atau cahaya lembut di sudut sebuah kartu — dibuat dengan fungsi gradient. Hal penting yang perlu dibiasakan sejak awal: gradient bukan nilai warna, melainkan gambar yang digambar browser secara langsung dari deskripsi kita, sehingga tidak butuh file apa pun. CSS menyediakan tiga fungsi utama: linear-gradient untuk arah lurus, radial-gradient yang menyebar dari satu titik, dan conic-gradient yang berputar mengelilingi pusat.

linear-gradient: Perpindahan Menurut Arah #

Fungsi linear-gradient menerima dua kelompok argumen: arah, lalu daftar perhentian warna (color stops). Contoh paling umum di kode nyata:

css 
.panel {
  /* fallback: warna pekat ditulis lebih dulu */
  background-color: rgb(14 165 233);
  background-image: linear-gradient(to right, rgb(2 132 199), rgb(125 211 252));
}
.hero {
  background-image: linear-gradient(135deg, rgb(2 132 199), rgb(14 165 233) 60%, rgb(125 211 252));
}

Mari kita telaah keduanya:

  1. Baris 3 (background-color: ...): warna pekat dinyatakan sebelum gambar. Bila suatu saat gradient gagal digambar, panel tetap berwarna — inilah pola fallback yang kita pegang untuk semua latar gambar.
  2. Baris 4 (gradient pertama): arah to right memulai perpindahan dari kiri; warna pertama menempati sisi kiri dan warna terakhir menempati sisi kanan, dengan perpaduan halus di antaranya.
  3. Baris 7 (gradient kedua): arah dapat pula ditulis sebagai sudut, misalnya 135deg. Angka 60% pada stop kedua berarti warna biru tengah mencapai warna penuhnya di titik 60% panjang gradient — sisanya adalah ruang perpaduan ke warna ketiga.

Hasil di Browser:

text 
Panel tampil dengan perpaduan biru tua ke biru muda dari kiri ke
kanan; computed background-color tetap rgb(14, 165, 233) sebagai
fallback. Judul pada panel teks menampilkan perpaduan warna di
dalam bentuk huruf (background-clip: text), dan panel tanpa
deklarasi terbaca background-image: none.

Kombinasi linear-gradient dengan background-clip: text dari Chapter Background Color menghasilkan judul berwarna gradient — warna teks dikosongkan dengan color: transparent, lalu gradient mengisi glyph. Versi berulangnya, repeating-linear-gradient, mengulang pola stop secara periodik dan praktis untuk garis-garis (stripes).

Dua teknik tambahan memperluas variasi linear-gradient. Pertama, dua stop yang menempati posisi sama — misalnya rgb(14 165 233) 50%, rgb(2 132 199) 50% — menghasilkan batas tegas, bukan perpaduan; teknik ini dipakai untuk bendera, strip kontras, dan diagram lingkaran sederhana. Kedua, jumlah stop tidak terbatas pada dua warna: menambah stop di tengah memberi kendali penuh atas kecepatan perpindahan warna di setiap segmen.

radial-gradient dan conic-gradient #

Radial-gradient menyebar dari sebuah titik pusat keluar ke segala arah, sehingga cocok untuk efek cahaya, sorotan, atau vignette. Pusatnya dapat digeser: radial-gradient(circle at 30% 30%, ...) meletakkan pusat di 30% dari kiri dan 30% dari atas elemen.

Conic-gradient berputar mengelilingi titik pusat seperti jarum jam, sehingga tepat untuk diagram lingkaran sederhana, roda warna, dan efek kerucut cahaya. Sudut setiap batas warna dapat dinyatakan persen atau derajat. Ketiga fungsi menerima daftar stop dengan format yang sama, sehingga keterampilan menyusun stop pada linear-gradient langsung berpindah ke dua fungsi lainnya.

css 
.sorotan {
  background-image: radial-gradient(circle at 30% 30%, rgb(254 215 170), rgb(239 68 68));
}
.roda {
  background-image: conic-gradient(rgb(239 68 68), rgb(250 204 21), rgb(34 197 94), rgb(59 130 246), rgb(239 68 68));
}

Hasil di Browser:

text 
Panel sorotan tampil seperti pantulan cahaya oranye yang memudar
ke merah di tepi; computed background-color rgb(239, 68, 68)
berfungsi sebagai fallback. Panel roda tampil sebagai lingkaran
warna yang berputar dari merah, kuning, hijau, ke biru lalu kembali
ke merah; fallback-nya rgb(250, 204, 21).

Gradient Adalah Image, Bukan Color #

Karena gradient bertipe <image>, ia hanya sah pada properti yang menerima gambar: background-image, border-image, mask-image, dan sejenisnya. Menuliskannya pada color atau background-color membuat deklarasi tidak valid dan diabaikan browser — jangan bingung ketika DevTools mencoret aturan tersebut.

Ketiga fungsi di atas telah didukung seluruh browser utama sejak lama, sehingga tidak memerlukan @supports. Pola pengaman yang tetap layak dipertahankan adalah fallback warna: deklarasikan background-color sebelum background-image, karena browser menggambar warna di bawah gambar latar.

Demo chapter ini menampilkan empat panel gradient lengkap dengan label, plus satu panel pembanding tanpa gradient. Lima penanda data-expected memeriksa nilai fallback background-color, background-clip: text, dan background-image: none.