Box shadow trong CSS: cú pháp, spread, inset và ví dụ

box-shadow hoạt động thế nào

box-shadow vẽ bóng quanh vùng border của phần tử. Bóng đi theo border-radius, không chiếm chỗ trong bố cục, và cần ít nhất hai giá trị: dịch bao xa theo chiều ngang và chiều dọc.

<!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>

Cú pháp

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

Số lượng giá trị độ dài quyết định ý nghĩa của chúng: hai giá trị là offset, ba thêm blur, bốn thêm spread. Thử xem:

<!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>

Thử 0 0 0 4px #f59e0b (một vòng), inset 0 0 12px #2563eb và -8px -8px 0 #16a34a.

Spread: vòng viền và bóng một phía

Spread thay đổi kích thước bóng trước khi làm mờ. Từ đó có hai mẫu hay dùng:

<!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>

• Một vòng: không offset, không blur, chỉ có spread. Khác với border, nó không làm thay đổi kích thước phần tử, nên là chỉ báo focus tốt (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
• Vòng có khe hở: chồng một spread màu trắng bên dưới một spread có màu lớn hơn.
• Chỉ một phía: dịch bóng xuống và thu nhỏ bằng spread âm, để bóng chỉ ló ra ở cạnh dưới.

Nhiều lớp bóng cho chiều sâu tự nhiên

Bóng thật có phần tối, sắc nét ở gần vật thể và phần mềm, nhạt ở xa hơn. Hai hoặc ba lớp bóng mô phỏng điều đó tốt hơn nhiều so với một lớp blur lớn:

<!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>

Bóng đầu tiên trong danh sách được vẽ trên cùng. Giữ màu bóng là đen bán trong suốt hoặc một tông tối của màu nền, đừng bao giờ dùng xám đặc, để bóng làm tối đi bất cứ thứ gì nằm bên dưới.

Bóng inset

inset vẽ bóng bên trong vùng padding, như thể bề mặt bị ấn lõm xuống. Kiểu này hợp với ô nhập liệu, vùng lõm và nút đang được nhấn:

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%);
}

Bóng inset được vẽ trên nền nhưng dưới nội dung. Bóng đi theo hình dạng chữ thay vì theo hộp là text-shadow.

Lỗi thường gặp

• Bóng đen tuyền, không trong suốt. Trông như đường viền tối. Hãy dùng alpha từ 10% đến 30%.
• Một lớp blur thật lớn để tạo chiều sâu. Hãy xếp một bóng nhỏ, sắc với một bóng lớn, mềm.
• Bóng bị cắt ở mép. Một phần tử tổ tiên có overflow: hidden cắt mất nó; thêm padding cho phần tử tổ tiên hoặc chuyển quy tắc overflow đi chỗ khác.
• Blur âm. Giá trị này không hợp lệ và cả khai báo bị bỏ qua.
• Tạo animation cho box-shadow trên nhiều phần tử. Nó vẽ lại ở mỗi khung hình. Với trang nặng, hãy tạo animation cho opacity của một pseudo-element mang bóng lớn hơn.