Depth, Shadow & Lighting — UI/UX

Shadow dan Depth dalam UI Four elevation levels from flat to high elevation, each with progressively deeper shadow.flatlowmediumhighShadow yang konsisten mencip

Shadow dan Depth dalam UI

Shadow yang konsisten menciptakan hierarki kedalaman (elevation).

Shadow memberikan depth (kedalaman) — membuat elemen terasa "terangkat" dari background, menciptakan hierarki visual.

Shadow Scale

Seperti font dan spacing, shadow juga butuh scale yang konsisten:

:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
}

Elevation Hierarchy

Shadow level menunjukkan "ketinggian" elemen:

Level	Shadow	Contoh
0 (ground)	None	Background, section
1 (raised)	sm	Card, input
2 (floating)	md	Dropdown, tooltip
3 (overlay)	lg	Modal, dialog
4 (top)	xl	Toast notification

Cara Membuat Shadow yang Bagus

Gunakan offset Y lebih besar dari X — cahaya datang dari atas, shadow jatuh ke bawah
Blur yang cukup — shadow dengan blur 0 terlihat harsh (kecuali untuk neubrutalism)
Opacity rendah — rgba(0,0,0,0.1) sudah cukup, rgba(0,0,0,0.5) terlalu gelap
Warna shadow — gunakan warna dark yang slightly tinted, bukan pure black

Layered Shadows

Trick pro: gunakan 2 shadow sekaligus untuk efek yang lebih natural:

.card {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),   /* Shadow tajam dekat */
    0 6px 16px rgba(0,0,0,0.08);  /* Shadow blur jauh */
}

Tips

Konsisten — semua card di satu level pakai shadow yang sama
Hover elevation — naikkan level shadow saat hover untuk feedback
Dark mode — shadow kurang efektif, gunakan border atau brightness
Performance — box-shadow bisa berat jika terlalu banyak; gunakan will-change jika perlu

Material Design menggunakan elevation system yang sangat terstruktur. Vercel dan Linear menggunakan shadow sangat subtle — hampir tidak terlihat tapi tetap memberikan depth.