Linear Gradient

background-color hanya mampu menampilkan satu warna rata, padahal banyak desain membutuhkan transisi warna: banner hero yang menggelap di satu sisi, tombol dengan kilau lembut, atau pita dekoratif yang berulang. CSS menyediakan kebutuhan itu lewat fungsi gradien, dan yang paling sering dipakai adalah linear-gradient(). Pada chapter ini kita mempelajari cara mengatur arah gradasi, menakar peralihan warna dengan color stop, membentuk pola dari garis warna yang tegas, lalu berkenalan singkat dengan dua saudaranya: radial-gradient() dan conic-gradient().

Gradien adalah Gambar, Bukan Warna #

Fakta pertama yang harus melekat: fungsi gradien menghasilkan nilai bertipe image, sama seperti url() yang merujuk berkas gambar. Karena itu gradien ditempatkan pada background-image, bukan pada background-color:

.hero {
  background-image: linear-gradient(to bottom, #14503a, #7cc795);
}

Gradien dihitung browser secara langsung — tanpa satu berkas gambar pun diunduh — sehingga hasilnya tetap tajam di semua ukuran layar dan bobot unduhannya nol.

Mengatur Arah Gradasi #

Argumen pertama linear-gradient() menentukan garis arah gradasi. Ada dua cara menulisnya, kata kunci dan sudut:

Hukum sudutnya sederhana tetapi sering terbalik diingat: 0deg setara to top, dan sudut membesar searah jarum jam. Berarti 90deg mengarah ke kanan, 180deg setara to bottom, dan 270deg mengarah ke kiri.

.banner-serong {
  background-image: linear-gradient(45deg, #14503a, #f4b942);
}

Tiga arah pada pasangan warna yang sama:

Menakar Warna dengan Color Stop #

Setiap warna pada daftar argumen disebut color stop. Tanpa posisi, browser membagi peralihan warna secara rata; dengan posisi, kita menentukan di titik mana sebuah warna tercapai penuh:

.gradasi-progres {
  background-image: linear-gradient(to right, #14503a 0%, #1f6f54 45%, #f4b942 100%);
}

Mari kita baca isinya:

1. to right — arah gradasi dari kiri ke kanan.
2. #14503a 0% — warna pertama menempati posisi awal; posisi boleh ditulis dengan % maupun satuan panjang seperti px.
3. #1f6f54 45% — hijau tengah tercapai penuh di 45% lebar; sebelum titik itu warna masih dalam tahap transisi.
4. #f4b942 100% — kuning menutup ujung kanan.

Ritme gradasi seperti ini dapat dikomposisi sesuai kebutuhan desain.

Garis Warna Tegas untuk Pola #

Color stop juga bisa dipasangkan dengan dua posisi sekaligus. Bila dua stop bertemu di posisi yang sama, transisi terjadi seketika — tidak ada gradasi halus, yang tersisa hanya garis batas:

.pita-dua-warna {
  background-image: linear-gradient(to bottom, #14503a 0 50%, #fdfaf3 50% 100%);
}

.pola-serong {
  background-image: repeating-linear-gradient(45deg, #1f6f54 0 14px, #e7f4ec 14px 28px);
}

Dua pola dari kode di atas:

Keduanya satu teknik yang sama: garis tegas untuk pola, lalu repeating-linear-gradient() bila polanya perlu berulang sampai tepi.

Dua Saudara: radial-gradient dan conic-gradient #

Dua fungsi gradien lain memakai pola pikir yang sama — daftar color stop — tetapi bentuk arahnya berbeda:

.orb {
  background-image: radial-gradient(circle at 30% 30%, #ffe8b0, #f4b942);
}

.pie {
  background-image: conic-gradient(#1f6f54 0 40%, #f4b942 40% 75%, #d9534f 75%);
}

Dua fungsi itu pada elemen sungguhan:

conic-gradient() juga menjadi bahan favorit untuk indikator progres melingkar.

Kesalahan Umum #

Ringkasan #

linear-gradient() membentuk gradasi lurus dari daftar color stop; arahnya dikendalikan kata kunci to ... atau sudut yang dihitung searah jarum jam dari 0deg ke atas. Stop berposisi memberi kendali ritme warna, sementara stop yang bertemu di posisi sama menghasilkan garis tegas untuk pola berulang. Gradien adalah gambar buatan browser, sehingga selalu melekat pada background-image. Chapter berikutnya menaikkan levelnya: menumpuk beberapa latar sekaligus dalam satu elemen dengan multiple backgrounds.