Box Shadow CSS: Sintaks, Spread, Inset, dan Contoh

Cara kerja box-shadow

box-shadow melukis bayangan di sekeliling border box elemen. Bayangan mengikuti border-radius, tidak memakan ruang dalam tata letak, dan membutuhkan minimal dua nilai: seberapa jauh ia digeser secara horizontal dan vertikal.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 16px; }
    .row { display: flex; gap: 24px; flex-wrap: wrap; }
    .card {
      width: 150px; padding: 20px 12px; text-align: center;
      background: white; border-radius: 10px; font-size: 14px;
    }
    .hard { box-shadow: 6px 6px 0 #111827; }
    .soft { box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
    .inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="card hard">6px 6px 0 #111827</div>
    <div class="card soft">0 4px 12px, 15% black</div>
    <div class="card inset">inset 0 2px 6px</div>
  </div>
</body>
</html>

Sintaksnya

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];

Jumlah nilai panjang menentukan artinya: dua adalah offset, tiga menambahkan blur, empat menambahkan spread. Coba sendiri:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      width: 160px; height: 90px; margin: 32px;
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>box-shadow: <input id="val" value="0 10px 20px -5px rgb(37 99 235 / 50%)" size="36"></label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.boxShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(box).boxShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Coba 0 0 0 4px #f59e0b (sebuah cincin), inset 0 0 12px #2563eb, dan -8px -8px 0 #16a34a.

Spread: cincin dan bayangan satu sisi

Spread mengubah ukuran bayangan sebelum di-blur. Dari situ muncul dua pola:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spread</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
    .box { width: 140px; padding: 18px 10px; text-align: center; background: white; border: 1px solid #e5e7eb; font-size: 14px; }
    .ring { box-shadow: 0 0 0 4px #2563eb; border-radius: 8px; }
    .double { box-shadow: 0 0 0 3px white, 0 0 0 6px #16a34a; border-radius: 8px; }
    .bottom { box-shadow: 0 10px 8px -8px rgb(0 0 0 / 50%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box ring">4px ring</div>
    <div class="box double">gap then ring</div>
    <div class="box bottom">bottom only</div>
  </div>
</body>
</html>

• Cincin: tanpa offset, tanpa blur, hanya spread. Berbeda dengan border, cincin ini tidak mengubah ukuran elemen, jadi cocok sebagai indikator fokus (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
• Cincin dengan celah: tumpuk spread putih di bawah spread berwarna yang lebih besar.
• Satu sisi saja: geser bayangan ke bawah dan kecilkan dengan spread negatif, sehingga hanya mengintip di bagian bawah.

Bayangan bertumpuk untuk kedalaman yang realistis

Bayangan sungguhan punya bagian gelap dan tajam yang dekat dengan benda, serta bagian lembut dan samar yang lebih jauh. Dua atau tiga lapisan meniru hal itu jauh lebih baik daripada satu blur besar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elevation</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 24px 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; }
    .card { width: 140px; padding: 24px 10px; text-align: center; background: white; border-radius: 12px; font-size: 14px; }
    .one { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
    .layered {
      box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 8px rgb(0 0 0 / 8%),
        0 12px 24px rgb(0 0 0 / 8%);
    }
    .lift { transition: transform 0.2s, box-shadow 0.2s; }
    .lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 16px 32px rgb(0 0 0 / 14%);
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="card one">One heavy shadow</div>
    <div class="card layered">Three layers</div>
    <div class="card layered lift">Hover me</div>
  </div>
</body>
</html>

Bayangan pertama di daftar dilukis paling atas. Gunakan warna bayangan hitam semi transparan atau versi gelap dari warna background, jangan pernah abu-abu murni, supaya bayangan menggelapkan apa pun yang ada di bawahnya.

Bayangan inset

inset menggambar bayangan di dalam padding box, seolah-olah permukaannya tertekan ke dalam. Cocok untuk input teks, area cekung, dan tombol yang sedang ditekan:

input {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}

Bayangan inset digambar di atas background tetapi di bawah konten. Bayangan yang mengikuti bentuk huruf, bukan kotak, adalah text-shadow.

Kesalahan umum

• Bayangan hitam pekat yang sepenuhnya tidak transparan. Hasilnya terlihat seperti garis tepi gelap. Pakai alpha 10% sampai 30%.
• Satu blur raksasa untuk kedalaman. Tumpuk bayangan kecil yang tajam dengan bayangan besar yang lembut.
• Bayangan terpotong di tepi. Leluhur dengan overflow: hidden memotongnya; tambahkan padding pada leluhur itu atau pindahkan aturan overflow-nya.
• Blur negatif. Nilai ini tidak valid dan seluruh deklarasinya diabaikan.
• Menganimasikan box-shadow pada banyak elemen. Browser melukis ulang di setiap frame. Untuk halaman yang berat, animasikan opacity dari pseudo-element yang membawa bayangan lebih besar sebagai gantinya.