Box Shadow

Bayangan adalah cara tercepat memberi kesan kedalaman pada antarmuka: kartu produk terlihat terangkat dari latar, dialog terasa berada di atas halaman, dan notifikasi kecil terlihat melayang. Properti box-shadow menggambar bayangan di belakang kotak elemen — lengkungan border-radius pada elemen otomatis diikuti oleh bayangannya. Nilainya tersusun dari lima komponen yang akan kita bedah satu per satu, lalu kita rangkai menjadi bayangan ke dalam, cincin, dan bayangan bertingkat.

Anatomi Nilai Box Shadow #

Bentuk penulisan yang paling umum memuat empat nilai:

.kartu {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

Mari kita telaah keempat nilai tersebut:

1. Nilai pertama (4px): offset-x — menggeser bayangan 4 piksel ke kanan; nilai negatif menggeser ke kiri.
2. Nilai kedua (4px): offset-y — menggeser bayangan 4 piksel ke bawah; nilai negatif menggeser ke atas.
3. Nilai ketiga (8px): blur radius — melembutkan tepi bayangan sepanjang 8 piksel ke dua arah; 0 menghasilkan tepi yang tegas.
4. Nilai keempat (rgba(0, 0, 0, 0.5)): warna bayangan. Komponen alpha 0,5 menjaga bayangan tetap tembus cahaya sehingga latar di belakangnya masih terlihat.

Ada komponen kelima yang bersifat opsional: spread. Nilai positif memperluas bayangan sebelum digambar, nilai negatif menyusutkannya; bila tidak ditulis, spread bernilai 0. Satu hal menarik dapat dilihat pada panel Computed di DevTools: browser menuliskan warna di posisi terdepan dan menyisipkan spread yang tidak kita tulis, sehingga contoh di atas tercatat sebagai rgba(0, 0, 0, 0.5) 4px 4px 8px 0px.

Dua sifat lain perlu diingat. Pertama, bayangan tidak memengaruhi layout: elemen yang diberi bayangan tetap menempati ruang yang sama, dan elemen tetangga tidak terdorong sedikit pun. Kedua, offset negatif sah dipakai — berguna ketika sumber cahaya diasumsikan datang dari bawah, misalnya box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.2) untuk bayangan yang terangkat ke atas.

Bayangan Menyebar, ke Dalam, dan Bertingkat #

Kombinasi offset nol, blur nol, dan spread positif menghasilkan cincin solid yang mengelilingi elemen:

.cincin {
  box-shadow: 0px 0px 0px 4px rgba(14, 165, 233, 0.4);
}

Pola cincin ini yang biasa dipakai untuk meniru focus ring atau menandai pilihan yang sedang aktif. Sebaliknya, kata kunci inset di posisi paling depan membalik arah bayangan sehingga digambar ke dalam kotak:

.panel {
  box-shadow: inset 0px 0px 8px 2px rgba(0, 0, 0, 0.5);
}

Bayangan inset memberi kesan cekung — sering dipakai pada input dan panel yang perlu terlihat tertanam. Satu deklarasi juga dapat menampung beberapa bayangan sekaligus yang dipisahkan koma; bayangan pertama digambar paling atas:

.kartu-melayang {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 4px 12px rgba(0, 0, 0, 0.15);
}

Kombinasi bayangan rapat yang kecil dan bayangan lebar yang lembut seperti di atas adalah resep kartu modern: lapis pertama menempel pada tepi untuk memberi definisi, lapis kedua memberi kesan melayang tanpa terlihat gelap berlebihan.

Bayangan pada Komponen Kartu #

Untuk komponen nyata, bayangan hampir selalu dipadukan dengan border-radius, border tipis, dan padding yang cukup. File berikut memuat kartu produk yang dipakai oleh demo di akhir chapter:

<div class="kartu-produk">
  <div class="gambar-produk"></div>
  <div class="nama-produk">Kopi Arabika Gayo</div>
  <div class="harga-produk">Rp85.000</div>
</div>

Aturan yang menentukan kesan kedalaman adalah box-shadow: 0px 4px 12px rgba(15, 23, 42, 0.12): offset-x nol membuat bayangan simetris, offset-y 4px menggesernya lurus ke bawah, blur 12px melembutkannya, dan alpha rendah menjaga warnanya tetap netral di atas latar apapun. Border tipis 1px dihadirkan bersama bayangan karena bayangan lembut saja tidak cukup memisahkan kartu putih dari latar yang juga putih.

Hasil di Browser:

Kotak pertama tercatat "rgba(0, 0, 0, 0.5) 4px 4px 8px 0px" — warna di
depan, spread 0px disisipkan otomatis. Kotak kedua berupa cincin
"rgba(14, 165, 233, 0.4) 0px 0px 0px 4px", kotak ketiga bayangan inset
"rgba(0, 0, 0, 0.5) 0px 0px 8px 2px inset", kotak keempat dua bayangan
bertingkat, dan kartu produk memakai "rgba(15, 23, 42, 0.12) 0px 4px
12px 0px".

Demo lengkap chapter ini menampilkan keempat variasi bayangan dan kartu produk tersebut. Setiap elemen membawa atribut data-expected yang membandingkan nilai computed box-shadow secara utuh — dari urutan warna hingga spread yang disisipkan browser — sehingga pembahasan di atas dapat diverifikasi otomatis oleh harness uji Course ini.

/* Kartu produk dengan bayangan lembut — Course CSS (Box Shadow) */

.kartu-produk {
  width: 240px;
  padding: 16px;
  border-radius: 12px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  box-shadow: 0px 4px 12px rgba(15, 23, 42, 0.12);
}

.gambar-produk {
  height: 110px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgb(186, 230, 253), rgb(59, 130, 246));
}

.nama-produk {
  margin: 12px 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: rgb(15, 23, 42);
}

.harga-produk {
  font-size: 14px;
  font-weight: 700;
  color: rgb(2, 132, 199);
}