Coba liat foto langit pas matahari terbenam — warna ungu di atas pelan-pelan jadi jingga di tengah, terus merah di horizon. Bukan tiba-tiba pindah warna, tapi mulus mengalir. Itu gradient di alam. CSS bisa bikin efek serupa di latar tombol, kartu, banner, atau hero section. Linear gradient (mengalir lurus), radial gradient (memancar dari titik), conic gradient (muter kayak pie chart) — semua tanpa perlu Photoshop, cukup beberapa baris CSS.

🤔 Bukan cuma estetika. Gradient sering dipake fungsional juga: overlay gelap di atas foto biar text di atasnya kebaca, transisi warna untuk highlight area aktif di chart, fake "shimmer" effect di skeleton loading. Paham gradient = unlock banyak teknik UI modern.

Linear Gradient — gradien dalam garis lurus:

/* Dari atas ke bawah (default) */
background: linear-gradient(red, blue);

/* Menentukan arah */
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, blue);

/* Beberapa warna */
background: linear-gradient(to right, red, yellow, green, blue);

Radial Gradient — gradien melingkar dari tengah:

background: radial-gradient(circle, red, blue);
background: radial-gradient(ellipse at top left, red, blue);

Mengatur posisi warna (color stops):

background: linear-gradient(
  to right,
  red 0%,
  red 50%,
  blue 50%,
  blue 100%
);
/* Hasilnya: setengah merah, setengah biru, tanpa gradasi */

Gradien bisa dikombinasikan dengan properti background lain:

background:
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url("foto.jpg");
background-size: cover;

Pattern di atas sering digunakan untuk membuat overlay gelap di atas gambar.

🎭 Analogi sehari-hari

Gradient = lukisan langit fajar — warna mengalir mulus dari ungu (atas) ke jingga (bawah). Linear = transisi lurus. Radial = transisi melingkar dari pusat (matahari).

⚠️ Jebakan yang sering ditemui

• Gradient adalah background-image, bukan color — tidak bisa di-mix dengan background-color langsung.
• Hard stop dengan dua nilai sama — linear-gradient(red 50%, blue 50%) = bukan gradient, tapi solid color blocks.
• Banyak color stop = performance turun di gradient kompleks — pakai sparingly.
• Gradient to right vs 90deg sama — pilih yang lebih readable.
• Gradient backed-image hardcoded di CSS = tidak bisa user-customize. Pakai CSS variable untuk dynamic.
• conic-gradient untuk pie chart effect — modern.
• background-blend-mode mix gradient dengan image dasar untuk efek artistic.

TL;DR: Gradient = transisi mulus antar warna, dirender via background-image (bukan color). 3 jenis: linear-gradient (lurus, default top→bottom), radial-gradient (memancar dari titik), conic-gradient (muter kayak pie chart). Color stops untuk kontrol posisi: linear-gradient(red 0%, blue 50%, green 100%). Hard stop pakai 2 nilai sama (red 50%, blue 50%) bikin solid blocks. Pakai CSS variable kalau perlu user-customize.