Shadow adalah bayangan di bawah kotak. Bayangan bikin kotak kelihatan "terangkat" dari halaman, jadi mata tahu mana yang ada di depan. Bayangin selembar kertas di atas meja. Kalau nempel, bayangannya tipis dan tajam. Makin tinggi kamu angkat, bayangannya makin lebar, makin lembut, dan makin jauh turun. shadow-sm itu kertas yang nempel di meja, shadow-2xl kertas yang diangkat tinggi. Di pelajaran ini ada juga efek lain: opacity (tembus pandang) dan backdrop-blur (kaca buram, kayak kaca kamar mandi: bentuk di belakangnya masih kelihatan, tapi kabur).
🧪 Tebakan cepat: kotak
bg-white backdrop-blur-mdditaruh di atas gambar warna-warni. Gambar di belakangnya kelihatan buram? Tebak dulu, jawabannya ada di bagian "Efek kaca: backdrop-blur".
Bayangan: shadow-sm sampai shadow-2xl
<div class="bg-white rounded-xl p-6 shadow-lg">
Kartu
</div>
shadow-lg menghasilkan CSS ini di Tailwind v4:
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
- Satu bayangan ditulis dengan empat ukuran: geser ke samping (
0), geser ke bawah (10px), seberapa kabur (15px), dan seberapa melebar (-3px, minus artinya menyusut). rgb(0 0 0 / 0.1)adalah hitam dengan kepekatan 10%. Bayangan Tailwind memang tipis supaya kelihatan alami.- Ada dua bayangan sekaligus, dipisah koma: satu besar dan lembut, satu kecil di dekat kotak. Gabungannya terasa lebih nyata.
| Class | Rasanya |
|---|---|
shadow-2xs, shadow-xs |
garis bayangan tipis sekali |
shadow-sm |
nempel di halaman, buat kartu biasa |
shadow-md |
sedikit terangkat |
shadow-lg |
terangkat jelas, buat dropdown atau kartu yang di-hover |
shadow-xl, shadow-2xl |
melayang tinggi, buat modal atau dialog |
shadow-none |
gak ada bayangan sama sekali (box-shadow: 0 0 #0000) |
Di Tailwind v4 nama-namanya bergeser satu tingkat dari v3: shadow tanpa ukuran sekarang sama dengan shadow-sm, dan shadow-sm lama jadi shadow-xs.
Bayangan juga bisa diberi warna: shadow-lg shadow-blue-500/50 bikin bayangan biru dengan kepekatan 50%. shadow-none berguna buat mencabut bayangan di keadaan tertentu, misalnya active:shadow-none supaya tombol terasa "ditekan masuk".
Opacity: tembus pandang
opacity-50 menghasilkan opacity: 50%: seluruh elemen jadi setengah tembus pandang, termasuk teksnya. Angkanya persen: opacity-0 hilang, opacity-100 penuh.
Kalau yang mau tembus pandang cuma latarnya, tulis kepekatannya di warna latar dengan garis miring: bg-white/30 artinya putih dengan kepekatan 30%. Teksnya tetap jelas.
| Class | Yang jadi tembus pandang |
|---|---|
opacity-50 |
seluruh elemen: latar, teks, border, isinya |
bg-white/30 |
latarnya saja |
Efek kaca: backdrop-blur
backdrop-blur-md mengaburkan apa pun yang ada di belakang elemen, sejauh 12px. Supaya bagian belakang itu kelihatan, latar elemennya harus tembus pandang. Ini kartu dari latihan dan Lab, di atas latar warna-warni:
<div class="relative bg-gradient-to-br from-pink-400 to-blue-500 p-8">
<div class="absolute left-6 top-6 h-20 w-20 rounded-full bg-amber-300"></div>
<div id="glass" class="relative backdrop-blur-md bg-white/30 rounded-xl p-6 shadow-xl">
Efek Kaca
</div>
</div>
bg-gradient-to-br from-pink-400 to-blue-500mewarnai pembungkusnya dengan gradasi pink ke biru. Di Tailwind v4, nama barunyabg-linear-to-br.- Lingkaran kuning (
absolute ... rounded-full bg-amber-300) duduk di belakang kartu. Bentuk yang tajam seperti ini perlu ada, karena gradasi yang halus hampir gak berubah kalau diburamkan. relativedi kartu menaruhnya di atas lingkaran, seperti di pelajaran position dan z-index.backdrop-blur-mdmengaburkan lingkaran dan gradasi yang ada di belakang kartu.bg-white/30memberi lapisan putih tipis, jadi kartunya kelihatan seperti kaca buram.rounded-xlsudut 12px,p-6padding 24px,shadow-xlbayangan yang bikin kartunya melayang.
Kalau latarnya bg-white penuh, gambar di belakangnya gak kelihatan sama sekali, apalagi buramnya. Putih penuh menutup semuanya. Itu jawaban tebakannya. blur-md (tanpa backdrop-) beda lagi: dia mengaburkan elemen itu sendiri, termasuk teksnya.
⚠️ Jebakan yang sering ketemu
bg-whitepenuh di efek kaca.backdrop-blurgak ada gunanya kalau latarnya gak tembus pandang. Pakaibg-white/30atau sejenisnya.opacity-50buat latar transparan. Teksnya ikut pudar dan susah dibaca. Pakaibg-white/50kalau cuma latarnya yang mau tembus pandang.- Bayangan di atas latar gelap. Bayangan hitam di halaman hitam hampir gak kelihatan. Di mode gelap, pisahkan kartu dengan warna latar yang lebih terang atau border tipis.
- Salah ukuran di latihan. Pemeriksa mengecek padding
24px(p-6) dan sudut12px(rounded-xl).p-4(16px) ataurounded-lg(8px) gak lolos.
TL;DR: shadow-sm sampai shadow-2xl memberi bayangan dari tipis ke melayang tinggi, shadow-none mencabutnya. opacity-50 membuat seluruh elemen setengah tembus pandang, termasuk teksnya; bg-white/30 cuma latarnya. Efek kaca = backdrop-blur-md + latar yang tembus pandang seperti bg-white/30 + sesuatu yang warna-warni di belakangnya. Dengan bg-white penuh, gak ada yang bisa diburamkan.
