Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Bayangan Kotak CSS Mendapatkan Hasil yang Realistis Tanpa Uji Coba dan Kesalahan

Diterbitkan pada 2 Mei 2026

IKLAN · HAPUS?

Bayangan kotak adalah salah satu properti CSS yang terlihat sederhana hingga Anda melihat hasil yang terlihat seperti ilustrasi tahun 2008. Sintaksnya pendek, tetapi apa yang dilakukan oleh setiap nilai — dan bagaimana nilai-nilai tersebut berinteraksi — tidak jelas. Berikut cara menulis bayangan yang terlihat dipikirkan, bukan yang dipaste.

Sintaks, Didekati

box-shadow: offset-x offset-y blur-radius spread-radius color;

Lima nilai. Mari kita tepatkan satu per satu:

offset-x: Jarak bayangan dipindahkan secara horizontal. Nilai positif memindahkannya ke kanan; nilai negatif memindahkannya ke kiri.
offset-y: Jarak bayangan dipindahkan secara vertikal. Nilai positif memindahkannya ke bawah.
blur-radius: Memperhalus bayangan. Pada 0, tepatnya batasnya keras. Nilai yang lebih tinggi memperluas bayangan secara keluar dengan blur Gaussian yang diterapkan pada bentuk bayangan.
spread-radius: Memperluas atau menyusutkan bayangan sebelum blur diterapkan. Nilai positif membuat bayangan lebih besar dari elemen; nilai negatif membuatnya lebih kecil.
color: Warna bayangan. Kesalahan umum adalah menggunakan warna hitam murni.
inset: Kata kunci opsional yang membalikkan bayangan ke dalam elemen.

Blur vs Spread: Kebingungan yang Menghancurkan Bayangan

Dua nilai ini adalah sumber kebanyakan momen "mengapa hasilnya terlihat aneh".

Blur membuat bayangan menjadi lembut. Ini meniru penyebaran cahaya — semakin jauh dari sumber, semakin banyak bayangan menyebar. Sebuah blur-radius dari 8px pada elemen kecil terlihat sangat berbeda dibandingkan pada elemen besar.

Spread mengembangkan atau menyusutkan bentuk dasar bayangan. Jika Anda berusaha menciptakan kesan bayangan yang "jauh" dan lembut, meningkatkan blur tanpa spread negatif berarti bayangan menyebar di luar batas elemen, yang bisa terlihat tidak terikat. Sebuah spread negatif kecil memperkecil kembali, sehingga blur dimulai dari jejak yang lebih alami.

Kombinasi yang tepat biasanya adalah blur sedang dengan nol atau sedikit negatif spread. Itulah cara bayangan di dunia nyata bekerja — lebih lembut pada jarak jauh, tetapi tidak memperluas di luar objek yang memancarkan bayangan tersebut.

Membuat Bayangan Terlihat Alami

Tiga aturan untuk bayangan yang terlihat sengaja:

1. Jangan gunakan warna hitam murni. Bayangan nyata mengambil warna lingkungan. Warna navy gelap atau abu-abu hangat gelap pada 0.10–0.15 kelembapan terlihat seperti bayangan tanpa terlihat seperti bentuk yang dicetak. Coba rgba(0, 0, 0, 0.12) sebagai titik awal, lalu geser nada sedikit lebih hangat atau lebih dingin untuk sesuai dengan palet Anda.

2. Sesuaikan satu sumber cahaya. Jika bayangan bergerak ke arah yang berbeda pada elemen yang berbeda, halaman terasa tidak konsisten. Pilih arah — biasanya positif offset-y (cahaya dari atas) — dan tetap konsisten secara sistem.

3. Jaga kelembapan rendah. Bayangan pada kelembapan penuh terlihat seperti garis batas. Jika Anda bisa melihat tepi tajam, Anda telah terlalu kaku atau menghilangkan blur. Bayangan yang terlihat nyata adalah halus — mereka memberikan volume, bukan garis batas.

Menumpuk Beberapa Bayangan untuk Memberi Dimensi

CSS memungkinkan lapisan bayangan terpisah yang dipisahkan pada satu elemen. Di sini Anda mendapatkan dimensi nyata tanpa artefak visual.

Alih-alih satu bayangan besar, coba dua: bayangan dekat yang ketat untuk kontak, dan bayangan yang tersebar untuk elevasi.

box-shadow:
  0 2px 4px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.06);

Lapisan pertama memperkuat elemen di permukaan. Lapisan kedua memberikan kesan bahwa elemen itu mengapung. Tidak ada yang disebut "bayangan" secara terpisah — bersama-sama mereka menciptakan ilusi kedalaman. Secara fisik, ini meniru bagaimana sumber cahaya kuat yang dekat menciptakan bayangan ketat di bawahnya, sementara cahaya ambient mengisi area yang lebih lembut di luar.

Bayangan Dalam: Ketika Cahaya Dibalik

Itu inset kata kunci menggambar bayangan di dalam batas elemen, bukan di luar. Kasus utama adalah:

Kondisi tombol ditekan: Bayangan dalam yang dangkal pada :active menciptakan perasaan penekanan fisik, seperti klik tombol nyata.
Kedalaman input field: Input form dan area teks terasa terdalam dari permukaan dengan bayangan dalam di tepi atas — pola yang kembali ke desain skeuomorfik tetapi masih terbaca dengan jelas.

/* Pressed button */
button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Input field depth */
input {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
}

Kinerja: Kapan Menggunakan filter: drop-shadow

box-shadow memicu penggantian pada setiap perubahan — tidak hanya pada elemen itu, tetapi juga pada lapisan yang digambar di bawahnya. Untuk animasi atau antarmuka yang berat di scroll, ini menambah biaya yang dapat diukur.

filter: drop-shadow() berjalan di GPU compositor dan jauh lebih murah untuk bayangan yang animasi. Ini juga mengikuti bentuk yang sebenarnya dari elemen (termasuk area transparan), sementara box-shadow selalu mengikuti kotak model persegi panjang.

Aturan praktis: gunakan box-shadow untuk bayangan statis pada elemen layout. Gunakan filter: drop-shadow pada elemen yang animasi atau SVG di mana bayangan perlu sesuai dengan bentuk visual, bukan kotak pembatas.

Token Bayangan untuk Sistem Desain

Menghardcode nilai bayangan per komponen menyebabkan ketidakkonsistenan. Definisikan sejumlah kecil token elevasi sekali, lalu gunakan di mana saja.

:root {
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.04);

  --shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 12px rgba(0, 0, 0, 0.06);

  --shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);

  --shadow-xl:
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.06);

  --shadow-2xl:
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 32px 80px rgba(0, 0, 0, 0.08);
}

Setiap token menggunakan pendekatan dua lapisan: bayangan ketat untuk grounding kontak, dan bayangan tersebar untuk elevasi. Blur dan kelembapan meningkat seiring kenaikan elevasi — semakin jauh dari permukaan, semakin lembut dan semakin luas bayangan tersebut.

Nilai-nilai ini bekerja baik pada latar belakang putih dan abu-abu terang. Pada latar belakang gelap, balikkan logikanya — gunakan warna lebih terang dan semi-transparan untuk bayangan dalam, bukan warna gelap untuk bayangan yang dipancarkan.

Lewati Tebakan

Jika Anda sedang mengiterasi nilai bayangan — terutama saat menumpuk beberapa bayangan atau menguji kelembapan berbeda — tampilan langsung dapat menghemat waktu signifikan. Fitur Generator Bayangan Kotak CSS di IO Tools memungkinkan Anda menyesuaikan semua enam parameter secara real-time, menumpuk beberapa lapisan bayangan, dan menyalin CSS yang dihasilkan secara langsung. Berguna untuk menyesuaikan token desain baru atau memverifikasi bahwa bayangan terlihat benar sebelum dipasang di produksi.

Perbedaan antara bayangan yang terlihat dirancang dan yang terlihat dipaste biasanya tergantung tiga hal: kelembapan rendah, warna bukan hitam murni, dan membiarkan blur melakukan pekerjaan yang seharusnya tidak dilakukan oleh spread.