Box Shadow

Kotak yang sudah kita bentuk sejauh ini masih terasa datar, padahal antarmuka modern menuntut hierarki: kartu terasa di atas latar, dropdown melayang di atas kartu, dan modal berada paling depan. Property box-shadow menggambar bayangan untuk memberi kesan jarak itu — tanpa mengubah layout sedikit pun, karena bayangan tidak memakan ruang box model. Pada chapter ini kita membedah anatomi nilainya, membedakan bayangan tajam dan lembut, menumpuk beberapa bayangan, lalu menyusun sistem elevasi tiga tingkat dengan custom properties.

Anatomi Satu Bayangan #

css
.kartu-pesanan {
  box-shadow: 4px 4px 10px 0 rgba(15, 40, 30, 0.25);
}

Demo berikut menerapkan nilai di atas pada kartu:

Urutan komponennya sebagai berikut:

Komponen	Contoh	Peran
offset-x	`4px`	Menggeser bayangan ke kanan (negatif: ke kiri)
offset-y	`4px`	Menggeser ke bawah (negatif: ke atas)
blur	`10px`	Mengaburkan tepi; `0` berarti tajam
spread	`0`	Memperbesar (positif) atau mengecilkan (negatif) bidang bayangan
color	`rgba(...)`	Warna bayangan; bila dihilangkan, memakai `currentColor`
`inset`	kata kunci	Opsional — membalik bayangan ke dalam kotak

Dua offset wajib ditulis; blur, spread, warna, dan inset boleh dilewati. Kata kunci inset boleh berada di awal maupun akhir nilai.

Bayangan Tajam vs Bayangan Lembut #

Dua gaya bayangan menghasilkan kesan yang berbeda, dan keduanya dibentuk dari parameter yang sama:

css
.bayangan-tajam {
  box-shadow: 6px 6px 0 #1f6f54;              /* blur 0: blok pekat, seperti border kedua */
}

.bayangan-lembut {
  box-shadow: 0 8px 24px rgba(15, 40, 30, 0.18); /* blur lebar, warna tipis */
}

.input-cekung {
  box-shadow: inset 0 2px 4px rgba(15, 40, 30, 0.2); /* inset: kesan cekung di dalam */
}

Demo berikut menyandingkan ketiganya:

Bayangan tajam memberi kesan grafis seperti poster; bayangan lembut inilah gaya dominan antarmuka modern. Keyword inset membalik arah cahaya: bayangan berada di dalam tepi kotak, cocok untuk efek kolom input yang tampak cekung.

Menumpuk Beberapa Bayangan #

Satu property box-shadow menerima lebih dari satu bayangan, dipisah koma. Bayangan pertama digambar paling atas; menumpuk dua lapis tipis-lembar sering terlihat lebih alami daripada satu bayangan besar:

css
.panel-utama {
  box-shadow: 0 1px 2px rgba(15, 40, 30, 0.1), 0 8px 24px rgba(15, 40, 30, 0.14);
}

Kombinasi dua lapis tipis-lembar seperti ini sering terlihat lebih alami daripada satu bayangan besar, dan menjadi bahan utama sistem elevasi di bagian berikutnya.

Sistem Elevasi dengan Design Tokens #

Alih-alih menuliskan bayangan manual di setiap komponen, kelola tingkat kedalaman sebagai token di custom properties. Konvensi yang lazim: tiga tingkat untuk kebutuhan terbanyak:

css
:root {
  --elevasi-1: 0 1px 2px rgba(15, 40, 30, 0.1), 0 2px 6px rgba(15, 40, 30, 0.08);
  --elevasi-2: 0 4px 12px rgba(15, 40, 30, 0.16);
  --elevasi-3: 0 12px 32px rgba(15, 40, 30, 0.22);
}

.kartu-produk  { box-shadow: var(--elevasi-1); }
.menu-dropdown { box-shadow: var(--elevasi-2); }
.dialog-modal  { box-shadow: var(--elevasi-3); }

Demo berikut menerapkan persis pola token di atas — tiga panel dengan tiga tingkat kedalaman, dari kartu biasa hingga modal:

Saat tema halaman berubah, cukup token yang disesuaikan — pola ini akan terasa semakin berguna setelah kita masuk ke section Custom Properties dan Organisasi CSS. Deretan inilah kerangka sistem elevasi yang biasa dipakai di design system.

Catatan Performa dan text-shadow #

Bayangan dihitung ulang setiap kali elemen digambar ulang (paint). Pada elemen besar yang terus bergerak — misalnya di dalam area yang digulir — bayangan ber-blur lebar dapat menambah beban rendering; untuk animasi, prioritasnya menganimasikan transform dan opacity, yang tidak memicu reflow. Sementara itu, property text-shadow menerapkan pola yang sama untuk teks dengan format offset-x offset-y blur warna — tanpa spread dan tanpa inset — berguna untuk kontras teks di atas gambar.

Kesalahan Umum #

Gejala	Penyebab	Perbaikan
Bayangan sama sekali tidak terlihat	Offset, blur, dan spread semuanya 0 sehingga tidak ada bidang yang digambar	Beri blur atau offset, misalnya `0 4px 12px`
Warna bayangan mengikuti warna teks	Nilai warna tidak ditulis sehingga terpakai `currentColor`	Tulis warna eksplisit, umumnya `rgba` dengan alpha rendah
Bayangan terpotong di tepi wadahnya	Induk ber-`overflow: hidden` tanpa ruang cadangan	Beri padding pada induk, atau pindahkan pemotongan ke elemen yang tepat
Semua komponen berbayangan sama besar	Tingkat kedalaman tidak dibedakan	Gunakan token elevasi bertingkat sesuai hierarki komponen

Ringkasan #

box-shadow menggambar bayangan dengan pola offset-x, offset-y, blur, spread, dan warna, plus keyword inset untuk membalik arahnya ke dalam. Bayangan tidak memengaruhi layout, dapat ditumpuk beberapa lapis, dan paling terkelola bila dirangkum menjadi token elevasi bertingkat. Dengan kotak yang berbentuk dan berkedalaman, satu keputusan tersisa ketika isinya melebihi tempatnya: chapter berikutnya membahas overflow untuk mengatur konten yang meluap.