CSS Gradien Menulis dan Melacak Kesalahan Tanpa Menebak

CSS gradien adalah salah satu fitur yang terlihat sederhana hingga Anda melihat sebuah klump yang berwarna kecoklatan di mana Anda seharusnya melihat transisi yang halus dari biru ke ungu. Sintaksinya memiliki keanehan, jalur pelacakan tidak jelas, dan kebanyakan tutorial berhenti tepat sebelum masalah-masalah dimulai.

Ini adalah referensi praktis. Setiap konsep memiliki kode yang berfungsi. Buka generator CSS gradien di tab lain — Anda akan ingin bereksperimen saat membaca.

Tiga Jenis — dan Kapan Harus Menggunakan Masing-Masing

linear-gradient digunakan untuk hal-hal yang berarah: latar belakang hero, isi tombol, dan pembagi.

background: linear-gradient(135deg, #6366f1, #8b5cf6);

radial-gradient menyebar dari titik pusat — cocok untuk efek pencahayaan, kilatan, dan elemen UI berbentuk lingkaran.

background: radial-gradient(circle at 30% 40%, #f59e0b, #ef4444);

conic-gradient mengelilingi sudut pusat — pilihan yang tepat untuk diagram lingkaran, spinner loading, dan roda warna.

background: conic-gradient(from 90deg, #3b82f6, #8b5cf6, #3b82f6);

Aturan umum: jika transisi mengalir dalam arah tertentu, gunakan linear. Jika berradiasi, gunakan radial. Jika berputar, gunakan conic.

Pembagian Sintaksis: Bagian yang Menyebabkan Kebingungan

Sumber kebingungan paling umum adalah arah vs. sudut. to right dan 90deg keduanya menghasilkan gradien dari kiri ke kanan, tetapi berbeda dalam cara mereka menangani elemen yang tidak berbentuk persegi. Gunakan kata kunci arah (to right, to bottom right) ketika Anda ingin gradien beradaptasi dengan bentuk elemen. Gunakan nilai derajat ketika Anda membutuhkan kontrol yang tepat.

Titik warna adalah hal yang penting:

/* Even distribution — browser figures out spacing */
background: linear-gradient(to right, #f97316, #8b5cf6);

/* Explicit stops */
background: linear-gradient(to right, #f97316 0%, #f97316 30%, #8b5cf6 60%, #8b5cf6 100%);

Versi kedua mempertahankan oranye keras selama 30%, lalu berubah ke ungu. Tanpa posisi eksplisit, Anda mendapatkan campuran yang halus dan merata.

Anda juga dapat memaksa tepi warna yang tajam — berguna untuk pola garis:

/* Hard mid-stop: sharp color transition at 50% */
background: linear-gradient(to right, #3b82f6 50%, #ef4444 50%);

Masalah Umum dan Apa yang Sebenarnya Menyebabkannya

Pembentukan garis — garis terlihat daripada transisi yang halus — biasanya muncul pada transisi dengan kontras rendah atau dari gelap ke gelap. Menambahkan henti tengah yang halus dan memindahkan warna sedikit sering memperbaikinya:

/* Before — banding prone */
background: linear-gradient(180deg, #1e1b4b, #312e81);

/* After — add a mid nudge */
background: linear-gradient(180deg, #1e1b4b 0%, #2e2b6e 50%, #312e81 100%);

Warna yang tidak bergabung dengan baik — ungu berubah menjadi warna coklat antara merah dan biru — adalah masalah sRGB yang dikenal. CSS Color Level 4 memperkenalkan in oklab interpolasi, yang menggabungkan warna melalui ruang warna persepsi:

/* Modern — cleaner blends */
background: linear-gradient(in oklab to right, #ef4444, #3b82f6);

Dukungan browser kuat pada tahun 2026. Jika Anda membutuhkan keberlangsungan versi lama, tetap gunakan gradien standar sebagai fallback di atasnya.

Gradien konik pada WebKit yang lebih tua: tambahkan fallback warna padat untuk penggunaan fungsional — seperti diagram lingkaran dan indikator kemajuan — karena kegagalan dekoratif diperbolehkan, tetapi kegagalan UI tidak:

.pie {
  background: #6366f1; /* fallback */
  background: conic-gradient(#6366f1 var(--pct), #e5e7eb var(--pct));
}

Penggabungan Gradien

Latar belakang CSS menerima nilai ganda — gradien ditumpuk seperti lapisan, dari atas ke bawah sesuai urutan deklarasi:

background:
  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
  radial-gradient(ellipse at 20% 80%, #6366f1 0%, transparent 60%),
  radial-gradient(ellipse at 80% 20%, #f59e0b 0%, transparent 60%),
  #0f172a;

Lapisan gelap berada di atas, dua cahaya berada di bawahnya, dan fallback padat berada di bawah. Pola ini umum digunakan untuk bagian hero yang membutuhkan kedalaman tanpa memuat gambar.

Satu batasan: lapisan gradien dengan rgba atau henti transparan berinteraksi dengan yang berada di bawahnya dalam lapisan yang sama background bukan dengan latar belakang halaman. Rencanakan urutan lapisan sesuai kebutuhan Anda.

Variabel CSS Membuat Gradien yang Dapat Diatur Tema

Nilai warna yang ditulis secara langsung dalam gradien menghancurkan sistem tema. Definisikan henti sebagai variabel:

:root {
  --gradient-start: #6366f1;
  --gradient-end: #8b5cf6;
  --gradient-angle: 135deg;
}

.card {
  background: linear-gradient(var(--gradient-angle), var(--gradient-start), var(--gradient-end));
}

[data-theme="warm"] {
  --gradient-start: #f97316;
  --gradient-end: #ef4444;
}

Penggantian tema menjadi satu pengaturan variabel. Gabungkan ini dengan @property untuk mengaktifkan gradien yang bergerak — tanpa itu, CSS tidak dapat menginterpolasi antara nilai gradien:

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 135deg;
  inherits: false;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 495deg; }
}

.animated {
  animation: rotate-gradient 4s linear infinite;
  background: linear-gradient(var(--gradient-angle), #6366f1, #8b5cf6);
}

Kinerja: Ketika Gradien Lebih Mahal Daripada Gambar

Gradien di-rasterisasi pada waktu tampilan oleh GPU. Untuk gradien statis dan sederhana, ini lebih ringan daripada permintaan HTTP untuk gambar. Namun, gradien yang kompleks dan terletak pada elemen yang sering diperbarui dapat menciptakan bottleneck pada proses tampilan.

Perhatikan pola-pola berikut:

• Lebih dari 3–4 lapisan gradien pada satu elemen
• Gradien pada position: fixed latar belakang — mereka diperbarui pada setiap frame scroll
• Gradien yang bergerak tanpa @property — ini memaksa perbarui penuh daripada perbarui komposit

Profil di DevTools → Kinerja sebelum dioptimalkan. Sebagian besar penggunaan gradien tidak mendekati batas-batas ini. Ketika Anda benar-benar mengalami bottleneck, konversi ke gambar yang diproses sebelumnya atau beralih ke @property-berbasis animasi adalah solusi yang tepat.

Mulai dengan Generator, Selesai di Kode

Jalur tercepat untuk membuat gradien yang berfungsi adalah visual: gunakan Pembuat Gradien CSS untuk menyesuaikan warna dan posisi Anda, lalu salin hasilnya ke dalam stylesheet Anda. Dari sana, teknik-teknik di atas — ekstraksi variabel, penumpukan, oklab interpolasi — memungkinkan Anda mengembangkan hal tersebut menjadi sesuatu yang siap diproduksi tanpa menebak.

Anda mungkin juga menyukai