Cú pháp box-shadow từng tham số | offset, blur, spread, color【2026】

Copy một dòng box-shadow: 2px 2px 2px #000 từ Stack Overflow thường cho card già và nặng. Nguyên nhân không phải “CSS lỗi” mà là chưa tách từng tham số: offset, blur, spread, color làm việc khác nhau. Bài này đi cú pháp từng tham số — đủ để bạn tự sửa bóng trước khi đưa UI lên production.

Bài viết này giúp bạn

• Nhớ thứ tự và ý nghĩa từng giá trị trong box-shadow
• Phân biệt blur vs spread (hay nhầm nhất)
• Chọn color / alpha để tránh bóng đen đặc
• Dùng inset và layered shadow đúng chỗ
• Checklist + quy trình với công cụ preview trên trình duyệt

---

Cú pháp chuẩn

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

Ví dụ đầy đủ (bóng ngoài):

.card {
  /*   x    y   blur spread     color          */
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12);
}

Tham số	Bắt buộc?	Vai trò ngắn
inset	Không	Bóng trong hộp
offset-x	Có*	Dịch ngang (âm = trái, dương = phải)
offset-y	Có*	Dịch dọc (âm = lên, dương = xuống)
blur-radius	Không	Làm mềm mép; 0 = cạnh sắc
spread-radius	Không	Phóng/thu kích thước bóng trước blur
color	Nên có	Thường rgba / hsla để chỉnh độ đậm

*Trình duyệt chấp nhận dạng rút gọn, nhưng khi học hãy luôn viết đủ x y rồi mới thêm blur/spread.

Nhiều bóng: cách nhau bằng dấu phẩy — mỗi cụm là một lớp độc lập.

---

Từng tham số chi tiết

1. offset-x / offset-y — hướng nguồn sáng giả

Ánh sáng UI thường giả định từ trên xuống. Vì vậy card nổi hay dùng:

• offset-x: 0 (không lệch ngang, trừ khi có light từ một phía)
• offset-y: 2px–12px (bóng nằm dưới phần tử)

/* Nguồn sáng trên → bóng dưới */
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);

/* Lệch phải nhẹ — panel cạnh sidebar */
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08);

Lỗi thường gặp: 2px 2px với alpha cao → bóng “dán” góc dưới-phải kiểu Windows 95.

2. blur-radius — độ mềm của mép

• 0 → bóng cứng như cắt giấy
• Tăng blur → bóng lan, cảm giác xa mặt phẳng hơn

Blur không làm hộp lớn hơn theo nghĩa spread; nó làm năng lượng bóng “nhòe”. Muốn bóng to rõ ràng hơn, xem spread.

3. spread-radius — phóng / thu trước khi blur

Giá trị	Hiệu ứng
0 (mặc định)	Bóng bám sát kích thước hộp rồi mới blur
Dương (4px)	Bóng lớn hơn hộp — dễ “hào quang” quanh card
Âm (-2px, -4px)	Thu bóng vào trong — hay dùng với elevation Material-like

/* Tailwind-ish elevation: spread âm giúp bóng không tràn 4 phía */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

Mẹo nhớ: blur = làm mờ; spread = đổi size bóng.

4. color — đừng dùng #000 trần

Bóng UI gần như luôn cần alpha thấp:

Alpha	Cảm giác
0.05–0.1	Mềm, hiện đại
0.15–0.25	Rõ hơn, vẫn chấp nhận được
≥ 0.4	Dễ “đen đặc”, UI cũ

/* Tránh */
box-shadow: 0 4px 8px #000;

/* Nên */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);

Trên nền tối, thử rgba(0,0,0,0.4) hoặc bóng sáng nhẹ rgba(255,255,255,0.06) tùy design — đừng copy alpha từ theme sáng sang theme tối nguyên xi.

5. inset — bóng trong

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

Dùng cho lõm / nhấn. Card bán hàng “nổi” thì không inset.

---

Bảng giá trị mẫu theo độ nổi

Đây là điểm khởi đầu — chỉnh blur/spread trên preview cho khớp brand, đừng coi là “chuẩn tuyệt đối”.

---

Layered shadow: hai lớp thường đẹp hơn một lớp

Một blur khổng lồ dễ thành vệt xám. Hai lớp mô phỏng contact + ambient:

.card-rich {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 20px -4px rgba(0, 0, 0, 0.12);
}

• Lớp 1: nhỏ, gần mép → cạnh rõ
• Lớp 2: lớn, nhạt → độ sâu

Trên Tạo box-shadow bạn có thể dựng từng lớp, xem preview, rồi ghép bằng dấu phẩy trong CSS cuối.

---

Case study nhanh

Card landing bị “nặng”

Designer báo: bóng quá đen. Dev đang dùng 0 8px 8px rgba(0,0,0,0.45). Sửa:

1. Alpha → 0.12
2. Blur → 20px
3. Spread → -4px
4. Giữ offset-y: 8px

Kết quả: cùng “độ cao” cảm nhận nhưng không chiếm attention khỏi nội dung.

Nút neumorphism giả

Copy inset + bóng ngoài cùng lúc với alpha cao → bẩn. Chỉ giữ một inset nhẹ hoặc bỏ neumorphism nếu brand không cần — đừng chồng 4 lớp chỉ vì tutorial 2019.

---

Checklist trước khi merge CSS bóng

1. Đọc được từng số: x, y, blur, spread, color?
2. Alpha ≤ ~0.2 cho card sáng (trừ khi design cố ý dramatic)?
3. offset-y ≥ 0 cho “nổi” chuẩn?
4. Có nhầm blur với spread không?
5. Modal/dropdown có layered hoặc blur đủ lớn để tách khỏi nền?
6. Dark mode đã thử chưa?
7. Đã preview trên box-shadow tool trước khi paste vào PR?

---

Quy trình 2 phút với Kawa

1. Mở /vi/tools/box-shadow/
2. Chỉnh offset, blur, spread, màu
3. So preview với card thật (màu nền gần production)
4. Copy CSS → dán vào class / token design system
5. Nếu cần hai lớp: lặp lại và nối bằng ,

Công cụ chạy trên trình duyệt, không bắt đăng ký — phù hợp chỉnh bóng khi làm freelance hoặc học CSS mà không muốn mở Figma chỉ để lấy một dòng shadow.

---

Tóm tắt

Tham số	Nhớ một câu
offset-x/y	Hướng bóng / nguồn sáng giả
blur	Mềm mép
spread	To/nhỏ bóng trước khi mờ
color	Alpha thấp hơn bạn nghĩ
inset	Bóng trong — UI lõm

Thuộc thứ tự offset → blur → spread → color, rồi mở generator box-shadow khi cần tinh chỉnh bằng mắt thay vì đoán số.