Copy-paste box-shadow từ generator: workflow nhanh cho card, button, modal【2026】

Ticket Figma ghi “shadow như Material”. Bạn mở DevTools, gõ thử 0 8px 24px #000, rồi lại rgba(0,0,0,0.35), rồi lại 0 4px 12px — mất 15 phút và bóng vẫn lệch mock. Vấn đề không phải bạn quên cú pháp; vấn đề là chỉnh số mù chậm hơn chỉnh bằng preview rồi paste.

Bài này tập trung workflow copy-paste từ generator — cheat sheet tham số, bảng preset dán được ngay, lỗi hay gặp khi paste, và khi nào dùng inset. Nếu bạn đang tìm soft UI nhiều lớp và elevation token chi tiết, đọc thêm hướng dẫn soft stack box-shadow — góc đó khác với bài “lấy CSS nhanh” này.

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

• Nhớ thứ tự tham số box-shadow để đọc CSS generator xuất ra
• Có bảng preset card / button / modal copy thẳng
• Biết lỗi paste phổ biến (thiếu đơn vị, quên phẩy, opacity kép)
• Phân biệt nhanh box-shadow vs drop-shadow trước khi dán sai chỗ
• Dùng công cụ box-shadow như bước trong PR, không phải “tool trang trí”

---

Vì sao đoán số chậm hơn generator

box-shadow gồm năm phần (cộng tùy chọn inset):

Phần	Ý nghĩa ngắn	Gợi ý chỉnh nhanh
offset-x	Lệch ngang	Thường 0 với card “ánh sáng từ trên”
offset-y	Lệch dọc	Dương nhỏ (2px–12px) giả lập nguồn sáng trên
blur	Độ mềm mép	Lớn hơn offset một chút thì nhìn tự nhiên
spread	Phóng/thu vùng bóng	Âm nhẹ (-1px / -3px) giúp bóng sát đáy
color	Thường rgba	Opacity 0.08–0.2 cho UI hiện đại; tránh ≥ 0.45

DevTools hữu ích khi debug một class đã có. Generator hữu ích khi tạo mới và cần thấy bóng đổi realtime trong khi kéo slider. Với deadline UI (landing freelance, dashboard khách outsource), vòng “kéo → nhìn → copy” ngắn hơn vòng “sửa số → reload → đoán lại”.

---

Workflow 6 bước: từ generator đến PR

1. Mở box-shadow generator trên trình duyệt (không tài khoản).
2. Chọn vai trò UI trước khi kéo lung tung: card danh sách, nút primary, hay modal confirm.
3. Kéo Y offset và blur trước — hai trục này quyết định “nổi” hay “bẹt”.
4. Hạ opacity đến khi bóng không át chữ / icon trên card.
5. (Tuỳ chọn) thêm lớp thứ hai nếu cần chiều sâu — vẫn giữ mỗi lớp mỏng.
6. Copy CSS → dán vào .card, utility Tailwind tùy chỉnh, hoặc biến --shadow-md.

/* Ví dụ output kiểu generator — paste nguyên khối */
.card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.modal {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

Không bắt buộc “đẹp nghệ thuật” ngay lần đầu. Mục tiêu bước này: có CSS đúng cú pháp, nhìn ổn trên preview, dán được vào repo trong dưới 5 phút.

---

Cheat sheet preset: copy theo vai trò

Các số dưới đây là điểm xuất phát — tinh chỉnh trên generator theo nền thật (trắng, xám #F3F4F6, hoặc dark #111).

Cách dùng bảng trên generator

1. Dán hoặc đặt gần các số preset bằng slider (offset / blur / spread / opacity).
2. So mắt với mock Figma hoặc screenshot khách gửi qua Slack/Zalo.
3. Copy một lần — tránh chỉnh tay thêm trong IDE rồi làm lệch preview đã duyệt.

Team outsourcing hay nhận brief tiếng Anh “subtle elevation” hoặc tiếng Nhật “ふわっとした影”. Dịch thực tế: opacity thấp + blur vừa, không phải bóng đen đậm. Preset “card chuẩn” gần với yêu cầu đó hơn 0 8px 24px rgba(0,0,0,0.5).

---

Lỗi copy-paste hay gặp (và cách tránh)

1. Quên đơn vị px

Generator xuất 4px. Nếu bạn viết lại tay thành 4 trong vài context cũ, shadow có thể bị bỏ qua. Luôn paste kèm đơn vị như output.

2. Nhiều lớp thiếu dấu phẩy

/* ❌ Hai lớp dính nhau — CSS hỏng */
box-shadow: 0 1px 2px rgba(0,0,0,0.06) 0 4px 12px rgba(0,0,0,0.1);

/* ✅ Có dấu phẩy */
box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.1);

Trên generator, thêm nhiều shadow rồi copy cả khối — giảm lỗi này.

3. Paste vào Tailwind sai chỗ

shadow-md của Tailwind là utility có sẵn. Nếu design lệch token mặc định, hãy:

• Dùng arbitrary value: shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)], hoặc
• Ghi CSS variable / @layer riêng rồi reference.

Đừng vừa dùng shadow-lg vừa thêm style="box-shadow: ..." — khó debug và dễ “bóng kép”.

4. Opacity trên wrapper + alpha trong màu

Card đã opacity: 0.9 lại cộng rgba(..., 0.2) → bóng và chữ cùng nhạt. Giữ alpha trong màu shadow; tránh nhân thêm opacity trên cùng node trừ khi cố ý.

5. Dùng box-shadow cho icon trong suốt

Logo PNG/SVG có alpha: bóng hình chữ nhật nhìn “hộp”. Khi đó cân nhắc filter: drop-shadow(...) thay vì paste box-shadow card vào icon.

---

inset: khi nào bật trên generator

Nhu cầu	Nên dùng	Ghi chú paste
Card nổi trên nền	Shadow ngoài (không inset)	offset-y dương
Input / search lõm	inset	Opacity thấp để chữ vẫn đọc được
Nút đang nhấn	inset ngắn	Kết hợp đổi background, không chỉ bóng
Neumorphism thử nghiệm	Ngoài + inset	Dễ rối — prototype trên generator trước khi commit

inset viết đầu khai báo: box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);. Generator có tùy chọn inset — bật, xem preview, copy; đừng đoán vị trí từ tài liệu cũ.

---

Case study ngắn: landing freelance 1 buổi

Bối cảnh: Dev freelance Việt nhận landing bán khóa học. Designer gửi 3 mức: card khóa học, CTA hover, modal đăng ký.

Cách làm chậm: Chỉnh từng class trong VS Code, deploy preview Cloudflare mỗi lần — khoảng nửa giờ chỉ cho bóng.

Cách làm generator:

1. Mở box-shadow, làm card chuẩn → copy vào .course-card.
2. Tăng nhẹ blur + offset cho CTA hover → copy vào :hover (hoặc class riêng).
3. Modal: blur lớn hơn, thêm lớp phụ mờ → copy một khối.
4. Review trên mobile Chrome — bóng không cắt chữ tiêu đề tiếng Việt có dấu.

Kết quả: ba mức bóng thống nhất trong ~10 phút, PR chỉ chứa CSS đã thấy trước bằng mắt.

---

Checklist trước khi merge

• CSS lấy từ preview đã duyệt (hoặc khớp gần preset trong bảng trên)
• Có đơn vị px / rem nhất quán với file hiện tại
• Nhiều lớp: đủ dấu phẩy, không thừa semicolon giữa chừng
• Không “bóng kép” (utility Tailwind + inline trùng)
• Kiểm tra trên nền sáng và nền tối nếu product có dark mode
• Chữ trên card vẫn đọc được (đặc biệt tiêu đề tiếng Việt)
• Icon trong suốt: đã cân nhắc drop-shadow thay vì box-shadow

---

Cách dùng nhanh trên Kawa Dev Tools

1. Vào Tạo Box Shadow.
2. Chỉnh X/Y offset, blur, spread, màu / độ mờ — preview cập nhật ngay.
3. Thêm nhiều lớp nếu cần chiều sâu.
4. Bật inset khi làm input lõm hoặc trạng thái pressed.
5. Sao chép CSS và dán vào dự án.

Toàn bộ xử lý trên trình duyệt — phù hợp khi không muốn upload mock nội bộ lên dịch vụ lạ.

---

Câu hỏi thường gặp

Có phải học thuộc công thức Material không?
Không bắt buộc. Material là tham chiếu thị giác. Generator + preset trong bài đủ để ship UI; sau đó mới chuẩn hóa thành design token nếu team cần.

Một lớp có đủ không?
Đủ cho phần lớn card/button. Nhiều lớp khi cần “cạnh gần + chiều sâu xa” — xem thêm soft stack nếu bạn tối ưu thẩm mỹ lâu dài.

Shadow có ảnh hưởng hiệu năng?
Bóng lớn + nhiều lớp trên hàng trăm node có thể tốn paint. Với list dài, ưu tiên bóng nhẹ hoặc pseudo-element có kiểm soát — đừng paste modal shadow vào mọi hàng bảng.

---

Liên kết liên quan

• Công cụ CSS box-shadow
• Soft UI stack & elevation token
• CSS gradient
• Danh sách công cụ