Teks Gradient Berubah Jadi Kotak Warna, Shorthand yang Me-Reset

Gradient Teks Jadi Kotak Warna

Baru dua menit setelah push commit varian light mode, saya buka staging dan lihat brand name di header jadi kotak gradient solid. Bukan teks bergradasi lagi, melainkan benar-benar kotak warna, dari hijau ke ungu, memenuhi area yang tadinya cuma tulisan.

Saya langsung curiga gradient stop-nya salah. Mungkin hex color ke-copy kurang. Buka DevTools, cek computed style background-image: gradient-nya benar, tiga warna lurus 90 derajat. Persis seperti yang saya mau. Tapi yang tampil di layar tetap kotak.

Kata Kunci yang Diam-Diam Ngereset

Yang menarik, bug jenis ini nggak pernah bikin error. Nggak ada warning di konsol, nggak ada build yang merah. Gradient-nya sendiri sah-sah saja dirender, cuma "kanvas"-nya yang salah ukuran. Semua kelihatan wajar selama kita nggak bandingin hasilnya dengan niat awal desainnya. Baru setelah gali lebih dalam saya nemu masalahnya. Varian light saya tulis pakai shorthand background: linear-gradient(...). Dan di situlah trap-nya.

MDN menuliskan aturannya eksplisit: properti komponen yang tidak diset di deklarasi shorthand background otomatis kembali ke nilai default [4]. Artinya background-clip:text yang sudah di-set di base rule .text-gradient-tri langsung di-reset jadi border-box. Gradient tetap ada, tapi nggak di-clip ke bentuk teks lagi, makanya jadi kotak [5].

Bukti kecilnya kelihatan di panel computed style: setelah shorthand jalan, nilai background-clip elemen itu berubah jadi border-box, nilai awal properti tersebut menurut MDN [5]. Artinya browser tidak "rusak", dia persis menjalankan kontrak shorthand: mulai dari nol, isi yang dikirim, sisanya default. Base rule-nya pakai longhand: background-image terpisah, background-clip:text terpisah. Semuanya works. Begitu saya timpa dengan satu baris shorthand di override light, dua property itu lenyap tanpa peringatan.

Fix-nya Sepele, Pelajarannya Tidak

Perubahan di commit 366618c cuma ganti shorthand jadi longhand. Satu baris: background-image: linear-gradient(...) menggantikan background: linear-gradient(...). background-clip:text dari base rule tetap hidup karena nggak kena reset.

Momen ini juga nempelin satu titik lemah proses saya: perubahan tema itu visual, dan uji visual paling murah tetap mata sendiri. Sama seperti waktu kartu transparan menghilang di light mode, bug ini nggak bikin build merah, nggak bikin error di konsol, halaman kelihatan "selesai". Yang berubah cuma hasil render, dan itu cuma ketangkep kalau ada yang melihat dengan sengaja. Screengrab per tema sekarang jadi langkah tetap sebelum push restyle. Yang bikin saya geleng itu timing-nya. Varian light diperkenalkan di commit d3a62fc, langsung ke staging, dan hidup di sana selama kira-kira dua menit sebelum commit perbaikan masuk. Dua menit itu cukup buat saya screenshot, bingung, dan mulai diagnose. Untung staging-nya memang tempat buat kelihatan jelek. Kalau varian ini langsung lolos ke production, kotak gradient itu akan nongol ke pembaca lebih dulu sebelum saya sadar.

Biar perbedaannya kelihatan, begini bentuk dua versinya di berkas yang sama:

/* versi bermasalah: shorthand me-reset background-clip dari base rule */
.light .text-gradient-tri {
  background: linear-gradient(90deg, #1a7f37, #0969da, #8250df);
}

/* versi fix: longhand, background-clip:text base rule tetap hidup */
.light .text-gradient-tri {
  background-image: linear-gradient(90deg, #1a7f37, #0969da, #8250df);
}

Opsi lain sempat saya pertimbangkan: menambahkan background-clip:text langsung ke override light mode supaya deklarasinya lengkap. Itu juga menutup masalah, tapi bikin dua tempat mengeja hal yang sama, dan nanti ada dua tempat yang harus diingat waktu base rule berubah. Menghapus penyebabnya, bukan menambal gejalanya, bikin berkas tetap ramping. Saya pribadi dari sekarang pakai aturan sederhana: kalau cuma mau ganti gambar background di override tema, pakai background-image langsung. Shorthand background itu memang lengkap, tapi kelengkapannya justru risikonya: ia bukan cuma menambah, ia juga me-reset [8]. Dan di CSS, reset yang nggak kamu sadari itu jenis bug paling susah dicari, karena kode yang jalan nggak pernah berbohong, cuma niat kita yang beda sama kontrak yang dibaca browser.

---

Sumber

• MDN Web Docs, background shorthand [4]
• MDN Web Docs, background-clip [5]
• Dokumentasi Tailwind CSS, bg-clip-text [8]