Shadow CSS: box-shadow dan text-shadow Dijelaskan Tuntas

Coba perhatikan antarmuka yang menurutmu enak dilihat — sebuah kartu yang seakan melayang sedikit di atas halaman, tombol yang terangkat saat kamu arahkan kursor ke atasnya, atau modal yang jelas-jelas berada paling depan menutupi yang lain. Apa yang membuat elemen-elemen itu terasa berdimensi? Hampir selalu jawabannya satu: bayangan. Bayangan adalah trik paling ampuh untuk membuat layar yang sebenarnya datar terasa berlapis, dan CSS memberimu kendali penuh atasnya lewat dua property.

Dua property itu adalah box-shadow, yang menebarkan bayangan di sekeliling kotak sebuah elemen, dan text-shadow, yang melakukan hal serupa untuk teks. Keduanya berangkat dari ide dasar yang sama — sebuah offset, blur, dan warna — jadi begitu satu nyantol, yang satunya ikut paham dengan sendirinya. Di akhir panduan ini kamu bakal bisa membaca nilai bayangan apa pun cuma dengan sekali lihat, dan menulis sendiri dengan percaya diri. Yuk mulai.

Cara kerja box-shadow

box-shadow menggambar bayangan di sekeliling kotak persegi sebuah elemen — dan dia ikut mengikuti border-radius-nya, jadi sudut yang membulat akan menghasilkan bayangan yang membulat juga. Sintaks lengkapnya menerima beberapa nilai dengan urutan yang sudah baku:

.card {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
}

Satu baris itu sudah menutup kasus yang paling umum: bayangan halus yang duduk persis di bawah sebuah kartu. Tapi supaya kamu bisa mengatur bayangan sesuka hati, kamu perlu paham tiap angka itu sebenarnya sedang mengatur apa. Urutannya adalah offset horizontal, offset vertikal, blur radius, spread radius, warna:

Yuk kita bahas satu per satu, karena memahaminya secara terpisah inilah yang membuat kamu bisa mendesain bayangan, bukan sekadar menyalin dari internet lalu berharap hasilnya pas.

Offset: ke mana bayangannya jatuh

Dua angka pertama menentukan ke arah mana bayangan dilemparkan. Anggap saja keduanya menggambarkan posisi sumber cahaya. Offset vertikal yang positif mendorong bayangan ke bawah, yang otak kita baca sebagai cahaya datang dari atas — persis seperti perilaku cahaya di dunia nyata, dan itulah kenapa bayangan ke bawah terlihat alami:

/* bayangan tepat di bawah — cahaya dari atas */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);

/* bayangan ke bawah dan ke kanan — cahaya dari kiri atas */
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);

Mayoritas bayangan di UI memakai offset horizontal 0 dan offset vertikal positif, jadi muncul kesan rapi “disinari dari atas”. Menggesernya ke samping juga boleh kalau kamu mau efek cahaya menyudut yang lebih dramatis — asal konsisten di seluruh desainmu, supaya semuanya terlihat seperti disinari matahari yang sama.

Blur radius: lembut atau tajam

Angka ketiga adalah blur. Saat nilainya 0, bayangannya punya tepi yang keras dan tegas seperti bentuk solid. Makin besar nilainya, makin lembut dan menyebar tepinya:

box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);    /* tepi keras, tanpa blur */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* lembut, menyebar halus */

Blur adalah nilai yang paling menentukan seberapa nyata sebuah bayangan terasa. Bayangan di dunia nyata hampir tidak pernah setajam silet; tepinya selalu memudar. Jadi untuk kesan kedalaman yang alami, biasanya kamu butuh blur yang cukup besar — sering kali lebih besar daripada offset-nya sendiri. Offset kecil dipadu blur besar menghasilkan efek “melayang” lembut yang terlihat premium, seperti pada kartu-kartu yang didesain rapi.

Spread radius: lebih besar atau lebih kecil

Angka keempat, spread, memperbesar atau memperkecil seluruh bayangan sebelum blur diterapkan. Nilai positif membuatnya lebih lebar dari elemennya; nilai negatif menariknya jadi lebih rapat:

/* bayangan sedikit lebih besar dari kotaknya */
box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.15);

/* bayangan ditarik masuk, jadi cuma mengintip di bagian bawah */
box-shadow: 0 8px 12px -6px rgba(0, 0, 0, 0.3);

Spread itu nilai yang sering dilupakan orang, padahal diam-diam berguna. Spread negatif termasuk trik favorit: dia mengecilkan bayangan supaya cuma tampak di sisi tempat offset mendorongnya keluar, sehingga bayangannya rapat dan terkontrol — menempel pada elemen, bukan meluber ke segala arah.

Warna: jaga tetap halus

Nilai terakhir adalah warna bayangan. Kesalahan paling umum yang dilakukan pemula adalah memakai hitam pekat (#000), yang hasilnya terlihat berat dan palsu. Bayangan nyata itu transparan — dia menggelapkan apa yang ada di belakangnya, bukan mengecat gumpalan abu-abu solid. Jadi hampir selalu pakai rgba() dengan alpha yang rendah:

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  /* enak dilihat */
box-shadow: 0 4px 12px #000000;              /* berat, hindari */

Nilai alpha antara 0.1 sampai 0.25 sudah cukup untuk hampir semua kasus. Di atas background gelap kamu boleh sedikit lebih pekat; di atas background terang, sedikit lebih lembut. Kalau kamu masih belum pede soal rgba() dan format warna, panduan kami soal warna dan background membahasnya tuntas.

Inset shadow: bayangan di bagian dalam

Semua yang kita bahas sejauh ini menebarkan bayangan ke luar elemen. Tambahkan kata kunci inset, dan bayangannya berbalik ke dalam, membuat elemen tampak seperti ditekan masuk atau dicekungkan, alih-alih timbul ke atas:

.input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

Inilah rahasia di balik kesan “cekung” halus pada kolom isian form, tombol yang sedang ditekan, dan tombol geser. Bayangan dari dalam membuat permukaannya terasa masuk ke dalam, seperti lubang fisik yang nyata. Property-nya sama, nilainya sama — cuma inset yang membalik di sisi mana bayangannya muncul.

/* tombol yang tampak tertekan saat diklik */
.button:active {
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
}

Padukan bayangan luar pada keadaan diam dengan inset shadow pada :active, dan kamu dapat tombol yang benar-benar terasa amblas saat diklik. Tambahkan transition singkat, dan efeknya jadi terasa sangat “kena di jari”.

Menumpuk beberapa bayangan

Nah, di sinilah bayangan jadi benar-benar bertenaga: kamu bisa memasang beberapa bayangan sekaligus, dipisahkan koma, dan semuanya menumpuk dari depan ke belakang. Ini peningkatan paling besar yang bisa kamu lakukan, karena kedalaman di dunia nyata tidak pernah berupa satu bayangan datar — selalu beberapa bayangan lembut yang berlapis-lapis:

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.08);
}

Kartu itu punya tiga bayangan: satu rapat dan dekat, satu sedang, dan satu lebar yang menyebar. Digabung, ketiganya meniru cara cahaya sebenarnya berhambur, menghasilkan kesan elevasi yang jauh lebih kaya dan meyakinkan ketimbang satu bayangan tunggal. Teknik “bayangan berlapis” inilah pembeda antara bayangan yang terlihat dirancang dan yang terlihat asal tempel.

.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

Efek glow dan bayangan berwarna

Nggak ada aturan yang bilang bayangan harus abu-abu. Pakai nilai berwarna yang transparan, dan bayangan itu berubah jadi cahaya glow — pas banget buat focus ring, efek neon, dan menarik perhatian ke elemen yang sedang aktif:

/* glow cyan lembut di sekeliling input yang sedang fokus */
.input:focus {
  box-shadow: 0 0 0 4px rgba(0, 184, 230, 0.4);
  outline: none;
}

Perhatikan, di sini kedua offset-nya 0 dan blur-nya juga 0 — dengan hanya mengandalkan spread, bayangannya menjadi cincin yang merata di seluruh tepi elemen, dan persis begitulah cara membuat highlight fokus kustom. Naikkan nilai blur-nya, dan cincin itu melembut jadi glow sungguhan:

.button {
  box-shadow: 0 0 20px rgba(0, 184, 230, 0.6);
}

text-shadow: ide yang sama, untuk teks

Begitu box-shadow sudah masuk akal, text-shadow nyaris tanpa pelajaran tambahan. Dia menebarkan bayangan di belakang teksnya sendiri, dan sintaksnya adalah versi yang lebih sederhana — offset horizontal, offset vertikal, blur, warna:

.heading {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

Nggak ada spread, nggak ada inset — cuma dua offset, blur, dan warna. Bayangan tunggal itu mengangkat teks sedikit dari background, yang bisa membantu keterbacaan saat teks berada di atas gambar yang ramai. Dipakai secukupnya, dia menambah sentuhan rapi:

/* angkatan halus untuk judul hero di atas foto */
.hero-title {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

Dan sama seperti box-shadow, kamu bisa menumpuk beberapa text-shadow dengan koma untuk membangun efek — outline dengan menumpuk bayangan ke segala arah, atau tampilan neon yang menyala:

/* judul bergaya neon yang menyala */
.neon {
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(0, 184, 230, 0.9),
    0 0 20px rgba(0, 184, 230, 0.6);
}

Contoh nyata: kartu yang rapi

Sekarang kita gabungkan box-shadow, penumpukan, dan transition hover jadi sebuah kartu yang benar-benar layak kamu pakai di proyek nyata:

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 16px 32px rgba(0, 0, 0, 0.12);
}

<div class="card">
  <h3>ACY Partner Indonesia</h3>
  <p>Kartu melayang dengan bayangan berlapis yang terangkat saat di-hover.</p>
</div>

Saat diam, kartunya punya bayangan dua lapis yang lembut sehingga terlihat melayang sedikit di atas halaman. Saat di-hover, dia naik empat piksel dan bayangannya jadi lebih dalam serta lebih lebar — efek klasik “terangkat mendekat ke arahmu”. Transition-nya menghaluskan keseluruhan gerakannya. Kalau kamu mau mendalami gerakan halus itu, panduan kami soal CSS transition membahasnya lengkap.

Penutup

Bayangan adalah cara tercepat menambah kedalaman dan kerapian pada antarmuka, dan sekarang kedua property bayangan sudah kamu kuasai:

• box-shadow menebarkan bayangan di sekeliling elemen: offset horizontal, offset vertikal, blur, spread, warna.
• Mayoritas bayangan UI memakai offset horizontal 0, offset vertikal positif, blur yang cukup besar, dan warna rgba() yang transparan — bukan hitam pekat.
• Spread memperbesar atau memperkecil bayangan; spread negatif menjaganya tetap rapat dan terkontrol.
• inset membalik bayangan ke dalam elemen untuk kesan tertekan atau cekung.
• Tumpuk beberapa bayangan dengan koma untuk meniru cahaya nyata yang berhambur dan membangun sistem elevasi.
• Bayangan berwarna yang transparan berubah jadi glow — bagus untuk focus ring, tapi jangan pernah menghapus outline fokus tanpa menggantinya.
• text-shadow adalah ide yang sama untuk teks — offset, blur, warna, tanpa spread — dan paling bagus kalau dijaga tetap halus.

Dengan bayangan, kamu bisa membuat elemen apa pun melayang, tenggelam, atau menyala. Berikutnya kita bahas property yang melukis dengan warna lewat cara yang sama sekali berbeda — memadukan satu warna ke warna lain secara mulus di sepanjang permukaan: gradient CSS, yang menyulap background-mu dari datar jadi hidup.