Coba liat aplikasi Material Design (Gmail, Maps) — kartu/tombol punya bayangan halus di bawahnya, kerasanya kayak nempel di kertas yang ada elevasi. Itu trick visual: dunia 3D fake di layar 2D. Mata otomatis ngerti hierarki "mana yang lebih atas" dari bayangan. CSS punya 2 tools utama: box-shadow (bayangan kotak) buat depth + filter (efek visual: blur, grayscale, brightness) buat manipulasi tampilan tanpa edit gambar asli.

💡 drop-shadow vs box-shadow. Mirip tapi beda. box-shadow selalu bentuk kotak elemen — gak peduli isi gambarnya. filter: drop-shadow() ngikutin bentuk transparan gambar (PNG dengan area transparan = bayangan ngikutin siluet). Pas mau bayangin logo PNG transparan, pakai drop-shadow, bukan box-shadow (yang bakal kotak).

Box Shadow — menambahkan bayangan pada elemen:

/* box-shadow: offset-x offset-y blur spread color */
.kartu {
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Bayangan ke dalam (inset) */
.input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Beberapa bayangan sekaligus */
.tombol {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

Text Shadow — bayangan pada teks:

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

CSS Filters — efek visual pada elemen (mirip filter foto):

img {
  filter: blur(2px);          /* Blur */
  filter: brightness(1.2);    /* Kecerahan */
  filter: contrast(1.5);      /* Kontras */
  filter: grayscale(100%);    /* Hitam putih */
  filter: saturate(2);        /* Saturasi */
  filter: opacity(0.5);       /* Transparansi */
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}

/* Gabungan filter */
img:hover {
  filter: brightness(1.1) saturate(1.2);
}

Perbedaan drop-shadow vs box-shadow: drop-shadow mengikuti bentuk transparan gambar (PNG), sedangkan box-shadow selalu berbentuk kotak.

🎭 Analogi sehari-hari

box-shadow = bayangan badan kamu pas jalan siang bolong di lapangan — arah mataharinya nentuin ke mana bayangan jatuh, makin tinggi matahari makin pendek bayangannya. filter = kayak dipasang kacamata warna: dunianya tetep dunia yang sama, cuma cara liatnya beda. Mau pemandangan buram (blur)? Sama kayak orang minus ngintip tanpa kacamata. Mau hitam-putih (grayscale)? TV jadul jaman bapak-bapak masih kecil. Mau lebih cerah (brightness)? Lampu panggung dinyalain full pas konser.

⚠️ Jebakan yang sering ditemui

• Multiple shadow layered untuk depth realistis: box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.05);
• box-shadow rectangular — tidak follow border-radius di lebih awal browser. Modern: ya, follow.
• drop-shadow (filter) vs box-shadow — drop-shadow follow alpha channel PNG/SVG, box-shadow always kotak.
• filter BIKIN stacking context baru + GPU layer — animation smooth tapi ratus filter di halaman = lag.
• backdrop-filter = filter element BELAKANG (frosted glass effect). Browser support spotty.
• Filter di parent affects child — filter: blur(2px) di parent, semua text di dalamnya juga blur.
• opacity ≠ filter: opacity() — sama hasil, tapi opacity tidak bikin GPU layer.

TL;DR: box-shadow = bayangan kotak (offset-x offset-y blur spread color) untuk depth. Multiple shadow layered (0 1px 2px ..., 0 4px 8px ...) = realistic. text-shadow untuk teks. filter = efek visual (blur, brightness, grayscale, drop-shadow, dll), GPU-accelerated. drop-shadow (filter) ngikutin alpha channel PNG/SVG transparan; box-shadow selalu kotak. backdrop-filter = blur background di belakang elemen (frosted glass). Filter di parent kena ke semua child.