Cara Membuat Gradasi Warna dengan linear-gradient CSS (Lengkap + Playground)

Cara membuat gradasi warna di CSS: pakai fungsi linear-gradient() di dalam properti background, misalnya background: linear-gradient(to right, red, blue); untuk gradasi dari merah di kiri ke biru di kanan. Isi tanda kurungnya dua hal: arah (to right atau sebuah sudut seperti 45deg) lalu daftar warna. Simpan, refresh browser, dan latar elemenmu langsung berubah dari warna solid jadi transisi warna yang halus.

Satu baris itu inti jawabannya. Tapi ada beberapa hal yang sering membuat pemula bingung: kenapa gradient tidak jalan kalau ditaruh di background-color, cara mengatur di titik mana tiap warna berhenti (color stop), cara membuat gradasi memudar transparan di atas foto, dan kapan sebaiknya pakai linear-gradient versus radial-gradient atau conic-gradient. Semuanya dijawab berurutan di bawah, dan ada playground yang bisa langsung kamu mainkan.

Gradasi (Gradient) Adalah… (Pengertian Singkat)

Gradient adalah transisi halus antara dua warna atau lebih, dan di CSS ia diperlakukan sebagai sebuah GAMBAR, bukan warna biasa. Pegang konsep ini sejak awal: browser menghitung gradient sebagai gambar yang “digenerate” dari kode, bukan sebagai satu nilai warna. Akibatnya, tempat menaruhnya bukan di background-color, melainkan di background-image (atau shorthand background).

/* SALAH: background-color tidak menerima gradient, diabaikan browser */
.hero {
  background-color: linear-gradient(to right, #f97316, #8b5cf6);
}

/* BENAR: gradient adalah background-image */
.hero {
  background-image: linear-gradient(to right, #f97316, #8b5cf6);
}

/* Juga benar: lewat shorthand background */
.hero {
  background: linear-gradient(to right, #f97316, #8b5cf6);
}

Anatomi linear-gradient: Arah lalu Warna

Bentuk paling dasar linear-gradient() berisi dua bagian: nilai pertama menentukan arah, sisanya adalah daftar warna yang mau ditransisikan. Warna pertama muncul di titik awal, warna terakhir di titik akhir, dan browser mengisi ruang di antaranya dengan campuran halus keduanya.

.contoh {
  /* dari kiri ke kanan: merah → biru */
  background: linear-gradient(to right, red, blue);
}

Kalau kamu tidak menulis arah sama sekali, default-nya to bottom (dari atas ke bawah):

.default-atas-bawah {
  background: linear-gradient(#f97316, #8b5cf6); /* sama dengan: to bottom */
}

Mengatur Arah: Kata Kunci atau Sudut

Ada dua cara menuliskan arah gradient, dan keduanya boleh dipakai bergantian:

.pakai-kata-kunci {
  background: linear-gradient(to right, #0ea5e9, #8b5cf6);        /* ke kanan */
  background: linear-gradient(to bottom, #0ea5e9, #8b5cf6);       /* ke bawah */
  background: linear-gradient(to bottom right, #0ea5e9, #8b5cf6); /* diagonal ke pojok kanan-bawah */
}

.pakai-sudut {
  background: linear-gradient(90deg, #0ea5e9, #8b5cf6);  /* 90deg = ke kanan */
  background: linear-gradient(45deg, #0ea5e9, #8b5cf6);  /* diagonal 45 derajat */
  background: linear-gradient(180deg, #0ea5e9, #8b5cf6); /* 180deg = ke bawah */
}

Untuk sudut, arahnya dihitung searah jarum jam mulai dari atas: 0deg mengarah ke atas, 90deg ke kanan, 180deg ke bawah, dan 270deg ke kiri. Kata kunci to right persis sama dengan 90deg, dan to bottom sama dengan 180deg. Pakai kata kunci saat butuh arah lurus yang gampang dibaca, dan pakai sudut saat butuh kemiringan spesifik seperti 45deg.

Color Stop: Mengatur di Mana Tiap Warna Berhenti

Kamu bisa menambahkan posisi (dalam persen) setelah tiap warna untuk mengatur di titik mana warna itu “berhenti”. Ini disebut color stop. Tanpa posisi, browser membagi warna rata sepanjang gradient. Dengan posisi, kamu pegang kendali penuh.

/* Tiga warna dibagi rata otomatis */
.otomatis {
  background: linear-gradient(to right, red, yellow, blue);
}

/* Tiga warna dengan posisi eksplisit */
.dengan-posisi {
  background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
}

Trik yang lebih menarik: kalau dua color stop diberi posisi yang sama (atau sangat berdekatan), transisinya berubah dari gradasi halus jadi garis batas tegas. Teknik ini dipakai untuk membuat pita warna (color band) atau pola garis.

/* Batas tegas di 50%: setengah kiri merah, setengah kanan biru, tanpa campuran */
.pita-tegas {
  background: linear-gradient(to right, red 50%, blue 50%);
}

Setelah paham arah dan color stop, cara tercepat merasakannya adalah dengan mengutak-atiknya sendiri. Ganti tipe gradient, geser arah/sudut, ubah warna dan posisi tiap color stop, lalu salin baris CSS-nya:

Transparansi: Membuat Gradasi yang Memudar

Karena color stop menerima format warna apa pun, kamu bisa memakai rgba() atau kata kunci transparent untuk membuat gradient yang memudar dari berwarna ke tembus pandang. Ini teknik andalan untuk melapisi foto: gradasi dari gelap ke transparan membuat teks di atas gambar tetap terbaca tanpa menutupi seluruh fotonya.

/* Memudar dari hitam pekat (bawah) ke transparan (atas) */
.overlay-foto {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

linear vs radial vs conic: Tiga Jenis Gradient

CSS punya tiga fungsi gradient yang bentuk transisinya berbeda: linear-gradient() berjalan lurus, radial-gradient() memancar dari titik pusat, dan conic-gradient() berputar mengelilingi titik. Ketiganya sama-sama menghasilkan gambar dan sama-sama masuk ke background-image; yang beda hanya pola sebaran warnanya.

/* Lurus dari kiri ke kanan */
.linear { background: linear-gradient(to right, #f97316, #8b5cf6); }

/* Memancar dari tengah ke luar */
.radial { background: radial-gradient(circle, #f97316, #8b5cf6); }

/* Berputar mengelilingi pusat */
.conic  { background: conic-gradient(#f97316, #8b5cf6, #f97316); }

Untuk pemula, linear-gradient adalah yang paling sering kamu butuhkan: hampir semua latar tombol, header, dan overlay memakainya. radial-gradient enak untuk efek cahaya atau bola, sedangkan conic-gradient untuk hal-hal yang berputar seperti pie chart atau spinner loading. Gradient juga sering dipadukan dengan efek kedalaman lain seperti box-shadow untuk bayangan agar tombol atau card terlihat makin hidup.

Fallback: Beri Warna Cadangan

Praktik yang baik: pasang juga background-color dengan salah satu warna gradient sebagai cadangan. Kalau karena satu dan lain hal gradient gagal dirender, halaman tetap punya warna solid yang mendekati, bukan latar kosong.

.hero {
  background-color: #0ea5e9;                              /* fallback warna solid */
  background-image: linear-gradient(to right, #0ea5e9, #8b5cf6);
}

Perhatikan di sini kita sengaja memisah background-color dan background-image (bukan memakai shorthand background), supaya keduanya bisa hidup berdampingan: warna solid sebagai cadangan, gradient sebagai tampilan utama.

FAQ Seputar linear-gradient CSS

Bagaimana cara membuat gradasi warna di CSS?

Pakai fungsi linear-gradient() pada properti background atau background-image, misalnya background: linear-gradient(to right, red, blue);. Nilai pertama di dalam kurung adalah arah (to right atau sudut seperti 45deg), lalu daftar warnanya. Untuk gradasi melingkar ada radial-gradient(), dan untuk yang berputar ada conic-gradient().

Kenapa gradient saya tidak muncul?

Penyebab paling umum: gradient ditaruh di background-color. Gradient dihitung sebagai gambar, jadi ia hanya bekerja di background-image atau shorthand background, bukan background-color, yang hanya menerima satu warna solid. Cek juga penulisan fungsinya dan pastikan minimal ada dua warna.

Apa arti to right dan 45deg pada linear-gradient?

Keduanya menentukan arah transisi. to right berarti gradasi berjalan dari kiri ke kanan (sama dengan 90deg), sedangkan 45deg berarti miring 45 derajat searah jarum jam dari atas. Kalau arah tidak ditulis, default-nya to bottom (atas ke bawah).

Bagaimana cara mengatur di mana warna berhenti?

Tambahkan posisi dalam persen setelah tiap warna, misalnya linear-gradient(to right, red 0%, yellow 50%, blue 100%). Ini disebut color stop. Kalau dua warna diberi posisi yang sama (red 50%, blue 50%), transisinya berubah jadi garis batas tegas alih-alih gradasi halus.

Apa beda linear-gradient, radial-gradient, dan conic-gradient?

linear-gradient() mentransisikan warna dalam garis lurus, radial-gradient() memancarkannya dari titik pusat ke luar (seperti lampu sorot), dan conic-gradient() memutarnya mengelilingi titik pusat (seperti roda warna atau pie chart). Ketiganya sama-sama gambar dan masuk ke background-image.

Langkah Selanjutnya

Ringkasnya: gradient adalah gambar (jadi masuk background/background-image, bukan background-color), sintaks linear-gradient() berisi arah lalu warna, color stop dengan posisi untuk mengatur titik berhenti dan membuat garis tegas, transparansi lewat rgba()/transparent, sampai beda linear versus radial versus conic. Yang mengubah “paham” jadi “bisa” adalah praktik. Buka lagi playground di atas, tiru gradasi tombol aplikasi favoritmu, lalu rusak dan perbaiki.

Kalau mau jalur latihan yang terstruktur dengan editor langsung di browser, mulai dari lesson gradient di Hyper Sheets: kamu menulis CSS dan melihat gradasinya berubah real-time, lesson per lesson. Setelah nyaman, lanjutkan mendalami properti latar lain seperti background-color dan efek box-shadow untuk melengkapi tampilan komponenmu.