Gradient CSS: Background Linear, Radial, dan Conic

Warna polos memang sudah cukup, tapi perpaduan warna yang mengalir halus dari satu ke yang lain langsung bikin desain terasa lebih rapi dan berkelas. Perpaduan itulah yang disebut gradient, dan kabar baiknya kamu nggak butuh Photoshop atau file gambar untuk membuatnya. CSS bisa menyusun gradient hanya dengan satu baris kode — dan karena ini murni CSS, hasilnya tetap tajam di ukuran berapa pun dan sama sekali tidak menambah berat halaman.

Waktu kamu belajar soal warna dan background, kamu mengisi background dengan satu warna saja. Nah, gradient masuk ke property background yang sama persis — bedanya, nilainya menggambarkan transisi antarwarna, bukan satu warna solid. Yuk kita lihat cara kerja tiap jenisnya.

Sebenarnya gradient itu apa

Di CSS, gradient itu bukan warna — melainkan sebuah gambar yang dibuatkan browser secara langsung. Makanya ia ditaruh di background (dan di mana pun yang menerima gambar, seperti background-image). Kamu memberi CSS daftar warna plus sedikit petunjuk soal bagaimana warna-warna itu mengalir, lalu CSS yang melukis transisi halusnya untukmu.

Ada tiga jenis, masing-masing punya fungsinya sendiri:

• linear-gradient() — warna berbaur di sepanjang garis lurus.
• radial-gradient() — warna menyebar keluar dari satu titik pusat, berbentuk lingkaran atau elips.
• conic-gradient() — warna menyapu mengelilingi titik pusat, mirip potongan-potongan kue.

Kita bahas satu per satu, mulai dari yang paling sering kamu pakai.

Gradient linear

Gradient linear membaurkan warna di sepanjang garis lurus. Versi paling sederhana mengambil dua warna dan memudarkannya dari warna pertama ke kedua, dari atas ke bawah:

.box {
  background: linear-gradient(#00B8E6, #072f3d);
}

Secara bawaan, garisnya membentang dari atas ke bawah, jadi warna pertama ada di atas dan warna kedua di bawah. Untuk mengubah arahnya, tambahkan sudut atau kata kunci sebagai argumen pertama:

.box {
  /* sudut: 0deg ke atas, 90deg ke kanan, 180deg ke bawah */
  background: linear-gradient(90deg, #00B8E6, #072f3d);

  /* atau pakai kata kunci */
  background: linear-gradient(to right, #00B8E6, #072f3d);
  background: linear-gradient(to bottom right, #00B8E6, #072f3d);
}

Ada dua cara menentukan arah, dan keduanya terbaca cukup berbeda:

Versi sudut memberi kontrol yang detail — 45deg menghasilkan diagonal yang rapi — sementara versi kata kunci terbaca hampir seperti kalimat biasa. Pakai mana saja yang menurutmu bikin kodenya lebih jelas.

Menambahkan lebih banyak warna

Gradient tidak terbatas pada dua warna. Tulis sebanyak yang kamu mau, dipisahkan koma, dan CSS akan menyebarnya secara merata lalu membaurkan tiap pasangan:

.rainbow {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    violet
  );
}

Tiap warna yang kamu tambahkan disebut color stop. Tanpa petunjuk tambahan, color stop-nya disebar merata di sepanjang gradient. Tapi kamu juga bisa mematok sebuah stop ke posisi tertentu untuk mengatur di mana tiap warna mendarat.

Color stop: mengatur posisi warna

Beri persentase (atau satuan panjang) setelah sebuah warna, dan kamu memberi tahu CSS persis di mana warna itu harus tampil penuh:

.box {
  background: linear-gradient(
    to right,
    #00B8E6 0%,
    #00B8E6 50%,   /* warna pertama bertahan di separuh awal */
    #072f3d 50%,   /* warna kedua langsung dimulai */
    #072f3d 100%
  );
}

Potongan itu menghasilkan pembagian tegas tepat di tengah — separuh cyan, separuh teal gelap, tanpa baur sama sekali. Triknya adalah menaruh dua stop di posisi yang sama (50% di sini): transisinya tidak punya jarak untuk berbaur, jadi warnanya berganti seketika. Begitulah cara membuat garis yang tajam dan blok dua warna lewat gradient.

Renggangkan posisi stop-nya, baur halusnya muncul lagi; rapatkan, maka tepinya makin tajam. Satu ide ini saja — di mana tiap color stop diletakkan — sudah menjadi inti dari penampilan sebuah gradient.

Gradient radial

Kalau gradient linear mengalir di sepanjang garis, gradient radial menyebar keluar dari satu titik pusat — bayangkan cahaya atau sorot lampu. Warna pertama ada di tengah lalu memudar ke warna berikutnya saat bergerak ke arah tepi:

.box {
  background: radial-gradient(#00B8E6, #072f3d);
}

Secara bawaan bentuknya elips yang memenuhi kotak, dengan pusat yang, ya, di tengah. Keduanya bisa kamu ubah. Atur bentuknya ke circle untuk baur bulat sempurna, dan pakai at untuk memindahkan titik pusat ke mana pun:

.box {
  /* cahaya bulat yang ditaruh di pojok kiri atas */
  background: radial-gradient(circle at top left, #00B8E6, #072f3d);

  /* lingkaran dengan ukuran tertentu */
  background: radial-gradient(circle 120px at center, #00B8E6, #072f3d);
}

Color stop bekerja sama persis seperti pada gradient linear — tambahkan posisi untuk mengatur seberapa cepat warna tengah berganti jadi warna luar. Gradient radial pas banget untuk cahaya latar yang lembut, efek sorot di balik bagian hero, atau memberi kesan tiga dimensi yang halus pada lingkaran datar.

Gradient conic

Gradient conic menyapu warnanya mengelilingi titik pusat, bukan menyebar keluar darinya — mirip cara warna disusun pada roda warna, atau potongan diagram lingkaran. Warnanya berputar mengitari pusat:

.box {
  background: conic-gradient(#00B8E6, #4fd6f5, #072f3d, #00B8E6);
}

Karena sapuannya berputar penuh, mengulang warna pertama di akhir (seperti di atas) bikin lingkarannya menyambung mulus. Gradient conic bersinar untuk beberapa pekerjaan spesifik: diagram lingkaran dan donat, color picker, serta spinner loading. Dengan color stop yang tajam, kamu bahkan bisa membuat diagram lingkaran sungguhan hanya bermodal CSS:

.pie {
  border-radius: 50%;
  background: conic-gradient(
    #00B8E6 0% 40%,    /* potongan 40% */
    #4fd6f5 40% 75%,   /* potongan 35% */
    #072f3d 75% 100%   /* potongan 25% */
  );
}

Tiap potongan adalah sepasang stop tanpa baur di antaranya, dan border-radius: 50% membulatkan kotak jadi lingkaran. Itu sudah jadi diagram lingkaran yang berfungsi hanya dengan beberapa baris — tanpa perlu library grafik sama sekali.

Transparansi dan overlay

Gradient bisa memudar jadi transparan, bukan cuma jadi warna lain. Pakai warna yang punya kanal alpha — seperti rgba() atau hex dengan alpha — dan salah satu ujung gradient jadi tembus pandang:

.overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),   /* gelap di bagian bawah */
    rgba(0, 0, 0, 0)      /* sepenuhnya transparan di atas */
  );
}

Ini salah satu trik gradient yang paling berguna di desain nyata. Tumpuk overlay itu di atas sebuah foto, maka bagian bawahnya menggelap pas secukupnya supaya teks caption putih tetap terbaca, sementara bagian atas gambar tetap bersih dan utuh. Gradient ini muncul hampir di setiap banner hero dan kartu foto di internet — sekarang kamu tahu persis cara membuatnya.

Menumpuk beberapa gradient

Kamu bisa menumpuk beberapa gradient dalam satu background dengan memisahkannya pakai koma. Yang disebut pertama berada paling atas, jadi gradient yang lebih awal perlu punya sedikit transparansi supaya yang di bawahnya bisa terlihat:

.fancy {
  background:
    radial-gradient(circle at top right, rgba(0, 184, 230, 0.4), transparent 60%),
    linear-gradient(to bottom, #0a1620, #072f3d);
}

Di sini cahaya cyan lembut di pojok kanan atas ditumpuk di atas gradient gelap yang vertikal. Penumpukan seperti inilah yang membangun background bernuansa kaya dan berlapis yang sering kamu lihat di landing page modern — tiap efek adalah gradient-nya sendiri, ditumpuk jadi satu property.

Gradient berulang

Kalau kamu mau sebuah pola berjajar memenuhi elemen, fungsi repeating-linear-gradient() dan repeating-radial-gradient() akan mengulang color stop-mu berkali-kali begitu mencapai posisi terakhir:

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #00B8E6 0px,
    #00B8E6 10px,
    #072f3d 10px,
    #072f3d 20px
  );
}

Hasilnya garis-garis diagonal klasik — pita cyan 10px, lalu pita gelap 10px, berulang terus. Ini cara yang rapi untuk membuat pita peringatan, tekstur progress bar, atau pola latar yang halus tanpa satu pun file gambar.

Contoh nyata: tombol gradient

Sekarang kita gabungkan beberapa ide ini jadi sesuatu yang benar-benar bakal kamu pakai — tombol dengan background gradient halus yang berganti saat di-hover:

.btn {
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #00B8E6, #4fd6f5);
}

.btn:hover {
  background: linear-gradient(135deg, #4fd6f5, #00B8E6);
}

<button class="btn">Mulai sekarang</button>

Gradient diagonal memberi kedalaman pada tombol, dan menukar dua warnanya saat hover membuatnya seolah “berbalik” — sentuhan kecil yang bikin tombol terasa hidup dan responsif. Padukan dengan transisi halus, dan efeknya benar-benar terasa premium hanya dengan beberapa baris CSS.

Bonus: teks gradient

Satu trik bergaya yang layak kamu tahu: kamu bisa mengkliping gradient ke bentuk teks, sehingga huruf-hurufnya sendiri terisi oleh perpaduan warna. Caranya butuh sedikit kombinasi property:

.gradient-text {
  background: linear-gradient(to right, #00B8E6, #4fd6f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

<h1 class="gradient-text">Judul cerah</h1>

Gradient dilukis sebagai background, lalu background-clip: text mengklipingnya ke bentuk huruf, dan color: transparent membiarkan gradient menembus di tempat teks tadinya berada. Tampilan ini populer untuk judul hero, dan sekarang sudah masuk ke kotak alatmu.

Penutup

Gradient mengubah warna polos jadi sesuatu yang punya kedalaman dan gerak, dan tidak menambah ukuran unduhan sama sekali karena browser yang menggambarkannya untukmu. Inilah yang sudah kamu kuasai:

• Gradient adalah gambar yang dibuat CSS, jadi ia masuk ke background / background-image.
• linear-gradient() membaur di sepanjang garis; atur arahnya dengan sudut (90deg) atau kata kunci (to right).
• radial-gradient() membaur keluar dari pusat — pakai circle dan at untuk membentuk dan menempatkannya.
• conic-gradient() menyapu mengelilingi pusat, pas untuk diagram lingkaran dan roda warna.
• Color stop dengan persentase mengatur posisi tiap warna; dua stop di posisi sama menghasilkan tepi tajam untuk garis dan potongan kue.
• Pudarkan ke transparent untuk overlay foto, tumpuk beberapa gradient pakai koma, dan ulang untuk pola berjajar.

Gradient termasuk teknik kecil yang diam-diam mengangkat desain dari “lumayan” jadi “rapi”. Berikutnya di CSS, kita akan membahas bayangan kotak dan teks — cara lain menambah kedalaman yang cocok banget dipadukan dengan semua yang baru kamu pelajari.