Panduan CSS Gradient: Pola Linear, Radial, dan Conic

CSS gradient menciptakan transisi warna yang halus tanpa gambar, menghasilkan nol permintaan HTTP, skalabilitas tak terbatas, dan ukuran file yang sangat kecil. CSS modern mendukung tiga tipe gradient, masing-masing dengan opsi konfigurasi yang powerful. Panduan ini membahas semuanya dengan contoh praktis yang bisa langsung Anda gunakan.

Gradient Linear

Tipe yang paling umum, bertransisi sepanjang garis lurus:

/* Top to bottom (default) */
background: linear-gradient(#3B82F6, #8B5CF6);

/* With angle */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* With direction keywords */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

Color Stop

Kontrol posisi kemunculan setiap warna:

/* Even distribution (default) */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* Custom positions */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* Hard stop (no transition) */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

Gradient Multi-Stop

Buat transisi warna yang kompleks:

/* Sunset gradient */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* Rainbow */
background: linear-gradient(
  90deg,
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

Buat gradient linear secara visual dengan Gradient Generator kami — sesuaikan warna, sudut, dan stop secara real-time.

Gradient Radial

Memancar keluar dari titik pusat:

/* Circle from center */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* Ellipse (default shape) */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* Custom position */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

Kata Kunci Ukuran

/* closest-side: gradient reaches nearest edge */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner: gradient reaches farthest corner (default) */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* Explicit size */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

Gradient Conic

Berputar mengelilingi titik pusat seperti diagram lingkaran:

/* Basic conic */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* Pie chart segments */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* From specific angle */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* Custom center */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

Gradient Berulang

Ketiga tipe mendukung pola berulang:

/* Striped pattern */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* Concentric rings */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 5px,
  #1E3A8A 5px,
  #1E3A8A 10px
);

/* Checkerboard (using conic) */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

Menumpuk Beberapa Gradient

CSS mendukung beberapa background sekaligus, memungkinkan efek yang kompleks:

/* Gradient overlay on image */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* Cross-hatch pattern */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

Pola UI Praktis

Teks Gradient

.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Border Gradient

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Background Gradient Animasi

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Pertimbangan Performa

Gradient dipercepat oleh GPU dan memiliki performa yang baik:

Gradient di-render lebih cepat dibandingkan gambar yang setara
background-size memengaruhi biaya rendering — tile yang lebih kecil lebih ringan
Hindari menganimasi warna gradient secara langsung — animasikan background-position sebagai gantinya
Gradient kompleks dengan banyak stop tetap lebih cepat daripada PNG

Dukungan Browser

Semua browser modern mendukung gradient linear, radial, dan conic. Gradient conic adalah yang terbaru, didukung sejak 2020 di semua browser utama (Chrome 69+, Firefox 83+, Safari 12.1+). Tidak diperlukan vendor prefix untuk tipe gradient apa pun.

FAQ

Bagaimana cara membuat gradient halus antara dua warna yang terlihat keruh?

Gradient keruh terjadi saat transisi antara warna yang melewati abu-abu pada roda warna. Solusi: tambahkan color stop perantara di titik tengah dengan hue yang lebih cerah, gunakan color space oklch (linear-gradient(in oklch, ...)) untuk transisi yang seragam secara perseptual, atau tingkatkan saturasi warna di titik tengah.

Bisakah gradient menggantikan gambar untuk background?

Untuk pola abstrak, overlay, dan background dekoratif — tentu saja. Gradient memiliki waktu muat nol, berskala sempurna, dan tidak memerlukan permintaan HTTP. Untuk visual yang kompleks atau fotografi, gambar tetap diperlukan. Banyak desain modern menggabungkan keduanya: overlay gradient di atas gambar background.

Sumber Terkait

Gradient Generator — Buat CSS gradient secara visual
Tips Desain Palet Warna — Pilih warna untuk gradient Anda
Format Warna Dijelaskan — Pahami notasi warna dalam CSS