Shadow là gì?
Còn gọi: bóng đổ trong thiết kế giao diện
Shadow là hiệu ứng bóng mô phỏng ánh sáng, đặt dưới hoặc trong một đối tượng để tạo cảm giác nổi khỏi nền, thể hiện độ cao giữa các lớp giao diện như card, menu, modal.
Hiểu kỹ hơn
Trong Figma, thêm bóng ở mục Effects của bảng thuộc tính, chọn Drop shadow (bóng ngoài) hoặc Inner shadow (bóng trong), rồi chỉnh X, Y, Blur, Spread, màu và độ trong suốt. Bóng tự nhiên thường lệch xuống dưới vì ánh sáng giả định từ trên chiếu xuống. Nhiều design system dùng hai lớp bóng chồng nhau, một lớp gần sắc nét và một lớp xa mờ rộng, để trông thật hơn, rồi lưu thành effect style theo cấp độ cao như Elevation 1 đến 5. Trong Material Design, độ cao càng lớn thì bóng càng rộng và mờ; Material 3 chuyển phần lớn sang thể hiện độ cao bằng màu bề mặt. Ví dụ: dropdown và modal cần bóng rõ hơn card vì chúng nổi trên cùng. Lỗi thường gặp là dùng bóng đen đậm, độ trong suốt cao, khiến giao diện nặng nề và cũ kỹ; hoặc mỗi màn hình một kiểu bóng khác nhau. Trên nền tối, bóng gần như không thấy, nên cần thêm viền hoặc nền sáng hơn.
