Cách dùng Tạo Box Shadow CSS
- Chọn Box shadow hoặc Text shadow, sau đó bắt đầu từ một mẫu như Layered (realistic) hoặc Neumorphism.
- Chọn một lớp và điều chỉnh độ lệch X/Y, blur, spread, màu, độ trong suốt và inset bằng thanh trượt hoặc ô số.
- Thêm, nhân bản hoặc xóa lớp — xếp nhiều bóng mềm sẽ tạo chiều sâu tự nhiên nhất.
- Đổi màu nền preview, màu thẻ và bo góc cho phù hợp thiết kế, rồi nhấn Copy CSS.
Thuộc tính CSS box-shadow là gì?
box-shadow vẽ một hoặc nhiều bóng đổ bao quanh (hoặc bên trong) khung viền của phần tử. Mỗi bóng được viết theo dạng [inset] <x> <y> [blur] [spread] <color>, và nhiều bóng được ngăn cách bằng dấu phẩy — bóng đầu tiên được vẽ phía trên cùng. Bóng đổ tuân theo border-radius, không ảnh hưởng đến bố cục và không gây thanh cuộn.
| Giá trị | Tác dụng |
|---|---|
| Độ lệch X / Y | Dịch bóng sang phải/xuống dưới (giá trị âm thì sang trái/lên trên). |
| Blur | Làm mờ viền; 0 cho bóng sắc nét. Không được âm. |
| Spread | Làm bóng lớn lên (dương) hoặc nhỏ lại (âm) trước khi làm mờ. |
| Màu | Thường là màu tối với độ trong suốt thấp, ví dụ rgba(15, 23, 42, 0.08). |
| inset | Vẽ bóng bên trong khung — dùng cho nút bị nhấn và các ô lõm. |
Bóng đổ nhiều lớp, trông tự nhiên
Vật thể thật thường đổ một bóng tiếp xúc rõ nét cộng với một bóng môi trường rộng và mềm. Một bóng lớn duy nhất trông phẳng; nhiều lớp với độ lệch và blur tăng gấp đôi (1px, 2px, 4px, 8px, 16px…) và độ trong suốt thấp sẽ trông tự nhiên — hãy thử mẫu Layered. Spread âm trên một lớp mờ lớn (Elevated card) giữ bóng nằm dưới thẻ thay vì tràn ra hai bên. Hãy pha màu bóng theo tông màu nền thay vì dùng đen thuần để kết quả sạch hơn.
Neumorphism, hiệu ứng phát sáng và viền focus
Neumorphism kết hợp một bóng sáng (phía trên bên trái) và một bóng tối (phía dưới bên phải) trên phần tử có màu giống nền. Nó trông mềm mại nhưng độ tương phản rất thấp, nên đừng chỉ dựa vào nó để thể hiện nút hay trạng thái. Bóng không có blur và spread dương là viền focus tuyệt vời, bo theo border-radius: 0 0 0 2px #fff, 0 0 0 4px #4f46e5.
text-shadow
text-shadow dùng cú pháp tương tự nhưng không có spread và inset. Hãy dùng tinh tế để chữ dễ đọc trên ảnh, hoặc xếp nhiều lớp để tạo hiệu ứng neon, viền chữ và 3D kiểu retro (xem các mẫu Text shadow). Nên giữ chữ nội dung không có bóng vì nó làm giảm độ sắc nét.
Mẹo về hiệu năng và Webflow
Bóng lớn có blur hiển thị khá nhẹ nhưng tốn kém khi làm chuyển động. Thay vì chuyển đổi box-shadow khi di chuột, hãy đặt bóng hover lên pseudo-element ::after và làm mờ dần opacity của nó. Trong Webflow, thêm từng lớp ở panel Style tại Effects → Box shadows (chọn Outside hoặc Inside) — bảng bên dưới kết quả CSS liệt kê giá trị từng lớp, với spread được ghi là Size như trong Webflow. Hãy kết hợp bóng với nền từ CSS Gradient Generator.
Cũng được tìm dưới tên: box shadow, css shadow, text-shadow, drop shadow css, neumorphism, bóng đổ nhiều lớp, inset shadow, hiệu ứng đổ bóng css.
Các công cụ dùng kèm tốt với Tạo Box Shadow CSS
- Tạo Nút CSS — Thiết kế một nút bấm đẹp ở mọi trạng thái.
- Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.
- Máy tính CSS clamp() — Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện với phóng to, kèm giải thích công thức, xem trước trực tiếp và thang chữ hoặc thang khoảng cách linh hoạt hoàn chỉnh.
- Nén CSS — Dán stylesheet vào để thu nhỏ ngay lập tức.
Câu hỏi thường gặp
Sự khác nhau giữa blur và spread trong box-shadow là gì?
Làm sao để chỉ thêm bóng ở một phía?
0 8px 6px -6px rgba(0,0,0,.3) cho bóng chỉ ở phía dưới.box-shadow hay filter: drop-shadow() tốt hơn?
box-shadow bám theo khung và bán kính của phần tử, hỗ trợ spread và inset. filter: drop-shadow() bám theo hình dạng thực tế hiển thị, kể cả PNG trong suốt và SVG, nhưng không có spread hay inset và có thể nặng hơn khi render.