Box Shadow CSS Adalah: Cara Membuat Efek Bayangan (Lengkap + Playground)

Box-shadow adalah properti CSS untuk membuat efek bayangan di sekeliling sebuah elemen. Bayangan inilah yang memberi kesan “kedalaman” pada tampilan web, membuat card seolah mengambang di atas halaman, tombol terasa bisa ditekan, dan modal terlihat melayang di depan konten lainnya.

Sintaks dasarnya terlihat seperti deretan angka yang membingungkan: box-shadow: 0 10px 25px -5px rgba(0,0,0,0.25);. Tapi begitu kamu paham bahwa tiap angka itu punya tugas spesifik, geser horizontal, geser vertikal, kekaburan, pelebaran, semuanya jadi masuk akal. Kelima nilai box-shadow dibedah satu per satu di bawah, lengkap dengan inset, cara menumpuk beberapa bayangan sekaligus, dan kesalahan umum yang bikin bayanganmu terlihat murahan. Semuanya bisa langsung kamu coba di playground interaktif.

Box Shadow Adalah… (Definisi dan Fungsi)

Box-shadow adalah properti CSS yang menggambar satu atau lebih bayangan di belakang (atau di dalam) kotak sebuah elemen. Karena setiap elemen HTML adalah kotak, box-shadow mengikuti bentuk kotak itu, termasuk sudut yang sudah dibulatkan border-radius.

Fungsi utamanya adalah menciptakan hierarki visual lewat kesan kedalaman. Dalam desain antarmuka, elemen yang tampak lebih dekat ke pengguna terasa lebih penting, dan bayangan adalah cara termurah untuk menyampaikan jarak itu:

• Card dan panel, bayangan halus membuat kartu konten terlihat terangkat dari background.
• Tombol, bayangan tipis menandakan elemen bisa diklik; bayangan yang membesar saat hover memberi feedback.
• Modal dan dropdown, bayangan besar dan lembut memisahkan lapisan yang mengambang dari konten di belakangnya.
• Focus ring, box-shadow sering dipakai sebagai cincin fokus yang tidak menggeser layout.

Contoh paling dasar:

<div class="kartu">Aku punya bayangan halus.</div>

.kartu {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 24px;
}

Satu baris itu menghasilkan bayangan yang jatuh ke bawah, kabur, dan sedikit transparan, resep card modern yang kamu lihat di mana-mana. Angka-angkanya bukan sihir; kita bedah artinya di bagian berikutnya. Untuk latihan terstruktur dengan editor langsung di browser, lesson shadows dan filters di Hyper Sheets membahasnya langkah demi langkah.

Anatomi Box Shadow: Arti Kelima Nilainya

Sintaks box-shadow terdiri dari lima bagian dengan urutan tetap: offset-x, offset-y, blur-radius, spread-radius, dan color. Dua angka pertama wajib; sisanya opsional tapi menentukan kualitas bayangan.

.kotak {
  box-shadow: 8px 8px 20px 2px rgba(0, 0, 0, 0.3);
  /*          │   │    │   │  └─ color: warna bayangan */
  /*          │   │    │   └──── spread: pelebaran bayangan */
  /*          │   │    └──────── blur: seberapa kabur */
  /*          │   └───────────── offset-y: geser vertikal */
  /*          └───────────────── offset-x: geser horizontal */
}

1. offset-x: Geser Horizontal

Menggeser bayangan ke kanan (nilai positif) atau ke kiri (nilai negatif). 0 berarti bayangan tepat di belakang elemen secara horizontal.

2. offset-y: Geser Vertikal

Menggeser bayangan ke bawah (positif) atau ke atas (negatif). Untuk kesan cahaya datang dari atas, seperti di dunia nyata, bayangan biasanya digeser sedikit ke bawah, misalnya 0 10px.

3. blur-radius: Kekaburan

Menentukan seberapa kabur tepi bayangan. Nilai 0 menghasilkan bayangan bertepi tajam (seperti kotak solid kedua), sedangkan nilai besar membuatnya lembut dan menyebar. Nilai ini tidak boleh negatif.

4. spread-radius: Pelebaran

Memperbesar (positif) atau memperkecil (negatif) ukuran bayangan sebelum di-blur. Trik yang sangat umum: pakai spread negatif supaya bayangan lebih kecil dari elemen, sehingga hanya “mengintip” halus di bawah, inilah yang membuat bayangan card terlihat natural, bukan seperti awan gelap yang mengelilingi kotak.

5. color: Warna Bayangan

Menerima semua format warna CSS. Kalau kamu tidak menulisnya, browser memakai warna teks (currentColor). Di praktik nyata, warna bayangan hampir selalu memakai rgba() atau hsla() agar bisa semi-transparan, bayangan hitam pekat (black) nyaris tidak pernah terlihat bagus.

Paling enak dicoba langsung. Geser tiap nilai, ganti warna dan transparansinya, nyalakan inset, lalu salin baris CSS-nya:

inset: Bayangan di Dalam Elemen

Kata kunci inset mengubah bayangan luar menjadi bayangan dalam, bayangan digambar di dalam kotak, seolah-olah elemen ditekan masuk ke halaman. Tanpa inset, bayangan jatuh di luar elemen (default); dengan inset, ia muncul di dalam batas elemen.

.ditekan {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

Kegunaan khasnya: membuat input atau area teks terlihat “cekung”, tombol yang tampak tertekan saat di-klik, atau efek lubang/sumur pada progress bar. Letakkan kata inset di awal deklarasi, sebelum angka-angkanya.

Multiple Shadow: Menumpuk Beberapa Bayangan

Kamu bisa memberi lebih dari satu bayangan pada satu elemen dengan memisahkan tiap set nilai memakai koma. Bayangan yang ditulis lebih dulu digambar di lapisan paling atas.

.kartu-berlapis {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 16px 24px rgba(0, 0, 0, 0.1);
}

Begitulah bayangan yang terlihat profesional dibuat: alih-alih satu bayangan besar dan gelap, desainer menumpuk beberapa bayangan tipis dengan offset dan blur berbeda. Hasilnya bayangan yang lembut dan berlapis, mirip cara cahaya asli memantul. Sistem desain populer seperti Tailwind dan Material Design memakai teknik multiple shadow ini untuk level-level elevation mereka.

box-shadow vs drop-shadow vs text-shadow

Box-shadow bukan satu-satunya cara membuat bayangan, ada filter: drop-shadow() untuk mengikuti bentuk asli gambar, dan text-shadow khusus untuk teks. Memilih yang tepat menghindari hasil yang aneh. Berikut perbandingannya:

Aturan praktisnya:

• Elemen berbentuk kotak (card, tombol, modal) → pakai box-shadow. Ia paling lengkap fiturnya dan ikut melengkung mengikuti border-radius.
• Gambar transparan atau bentuk tak beraturan (logo PNG, ikon SVG, tooltip dengan ekor segitiga) → pakai filter: drop-shadow(), karena box-shadow hanya akan menggambar bayangan kotak persegi di sekelilingnya, mengabaikan area transparan.
• Teks → pakai text-shadow.

Box Shadow di Tailwind CSS

Di Tailwind CSS, box-shadow dipasang lewat utility class shadow-*: dari shadow-sm (halus) sampai shadow-2xl (paling besar), plus shadow-inner untuk inset dan shadow-none untuk menghapusnya. Class-class ini adalah preset multiple shadow yang sudah dirancang agar konsisten.

<div class="shadow-sm">Bayangan sangat halus</div>
<div class="shadow-md">Bayangan sedang (default card)</div>
<div class="shadow-xl">Bayangan besar (dropdown, modal)</div>
<div class="shadow-inner">Bayangan dalam (inset)</div>

Padanan yang paling sering dipakai:

• shadow-sm, shadow, shadow-md → bayangan halus untuk card dan tombol biasa.
• shadow-lg, shadow-xl, shadow-2xl → bayangan makin besar untuk elemen mengambang seperti dropdown dan modal.
• hover:shadow-lg → bayangan membesar saat hover, feedback interaktif yang populer.
• shadow-inner → padanan box-shadow: inset ....

Kalau kamu belum familiar dengan pendekatan utility-first, mulai dari panduan Tailwind CSS untuk pemula dulu.

Kesalahan Umum Saat Memakai Box Shadow

Kesalahan box-shadow paling umum: memakai warna terlalu gelap/pekat, lupa bahwa blur tidak boleh negatif, salah urutan nilai, dan memasang box-shadow pada gambar transparan. Berikut daftarnya beserta solusinya.

1. Bayangan Terlihat “Murahan” karena Terlalu Gelap

Bayangan box-shadow: 5px 5px 5px black terlihat kaku dan amatir. Bayangan asli selalu lembut dan transparan. Solusinya: perbesar blur, pakai rgba() dengan opacity rendah (0.1-0.25), dan pertimbangkan spread negatif.

/* Kaku dan gelap */
.buruk { box-shadow: 5px 5px 5px black; }

/* Lembut dan natural */
.bagus { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15); }

2. Menulis blur Negatif

Berbeda dengan offset dan spread yang boleh negatif, blur-radius tidak boleh bernilai negatif, nilai negatif dianggap tidak valid dan seluruh deklarasi diabaikan. Kalau ingin bayangan lebih kecil, kecilkan spread, bukan blur.

3. Salah Urutan Nilai

Urutan offset-x offset-y blur spread bersifat mutlak. Menulis box-shadow: 20px 0 10px berarti geser 20px ke kanan dan blur 10px, bukan yang kamu maksud kalau kamu ingin bayangan jatuh ke bawah. Ingat: angka pertama selalu horizontal, kedua selalu vertikal.

4. Lupa box-shadow Tidak Memakan Ruang Layout

Berbeda dengan border, box-shadow digambar “melayang” dan tidak menambah ukuran elemen atau menggeser tetangganya, mirip outline. Ini justru menguntungkan: bayangan bisa muncul dan membesar saat hover tanpa membuat layout meloncat. Kalau butuh garis yang memakan ruang, itu tugas border, bukan bayangan.

FAQ Seputar Box Shadow CSS

Box shadow itu apa?

Box-shadow adalah properti CSS untuk membuat efek bayangan di sekeliling sebuah elemen HTML. Bayangan ini memberi kesan kedalaman sehingga elemen seperti card, tombol, atau modal terlihat mengambang di atas halaman. Nilainya terdiri dari geser horizontal, geser vertikal, kekaburan, pelebaran, dan warna.

Apa arti angka-angka pada box-shadow?

Urutannya tetap: nilai pertama offset-x (geser horizontal), kedua offset-y (geser vertikal), ketiga blur-radius (kekaburan tepi), keempat spread-radius (pelebaran bayangan), dan terakhir warna. Dua angka pertama wajib; blur, spread, dan warna opsional.

Apa fungsi inset pada box-shadow?

inset mengubah bayangan luar menjadi bayangan dalam, sehingga bayangan digambar di dalam kotak elemen, memberi kesan elemen tersebut cekung atau tertekan ke dalam. Tulis kata inset di awal deklarasi, contohnya box-shadow: inset 0 2px 4px rgba(0,0,0,0.3).

Kenapa bayangan pada gambar PNG saya berbentuk kotak?

Karena box-shadow selalu membayangi kotak (bounding box) elemen, bukan bentuk isi gambarnya. Untuk gambar transparan seperti PNG atau ikon SVG, gunakan filter: drop-shadow() yang mengikuti bentuk asli objek dan mengabaikan area transparan.

Bagaimana cara membuat bayangan yang halus dan modern?

Perbesar nilai blur, pakai warna semi-transparan lewat rgba() dengan opacity rendah (sekitar 0.1-0.2), dan gunakan spread negatif agar bayangan sedikit lebih kecil dari elemen. Untuk hasil terbaik, tumpuk beberapa bayangan tipis (multiple shadow) alih-alih satu bayangan gelap.

Langkah Selanjutnya

Jadi, box-shadow adalah properti untuk membuat bayangan, tersusun dari lima nilai (offset-x, offset-y, blur, spread, color), bisa dibalik ke dalam dengan inset, ditumpuk jadi multiple shadow, dan berbeda peran dengan drop-shadow maupun text-shadow.

Bayangan menempel di ingatan lewat eksperimen, buka lagi playground di atas, coba tiru bayangan sebuah card di aplikasi favoritmu, lalu bandingkan dengan preset shadow-* Tailwind. Setelah bayangan lancar, lengkapi tampilan kotakmu dengan border-radius untuk sudut membulat supaya card-mu benar-benar terlihat modern.

Kalau mau latihan terstruktur dengan feedback langsung, lesson shadows dan filters di Hyper Sheets menyediakan editor interaktif yang mengecek jawabanmu lesson per lesson.