Tạo bóng khung (Box Shadow)
Xem trước và tạo giá trị CSS box-shadow cho giao diện thẻ, nút và panel.
Mô tả mục đích
CSS box-shadow dùng ngay cho card, nút và modal
Kết hợp offset-x, offset-y, blur, spread, color và inset để chỉnh chiều sâu và ranh giới của thành phần giao diện nhanh chóng.
Box-shadow giúp điều chỉnh mức độ ảo ảnh bằng các thông số offset, blur, spread, color và inset để phù hợp với chiều sâu của UI.
Công cụ này hỗ trợ sinh CSS shadow để kiểm tra tương phản và khả năng đọc trên nền tối/sáng trước khi áp dụng vào card, button hoặc modal thực tế.
Kịch bản phù hợp
Phù hợp khi cần tạo thang bậc trực quan cho hover card, nhấn mạnh nút, overlay modal hoặc toast.
Hướng dẫn tham số
offset x/y quyết định hướng, blur quyết định độ mềm, spread quyết định mức mở rộng, color quyết định tone, inset quyết định cảm giác nội mặt.
Điểm kiểm tra trước khi áp dụng
Kiểm tra đối chiếu tone nền trang thực tế, dark mode, độ nổi của chữ button và sự khớp với token hệ thống thiết kế (radius, spacing, shadow tone).
Kết quả tạo ra tối ưu cho xem trước nhanh và sao chép. Hãy rà soát lại trên giao diện thực để kiểm tra sự khác biệt render theo nền và token trước khi đưa vào sử dụng.
Tạo bóng khung (Box Shadow) Khu vực tạo box-shadow
Cách sử dụng
- 1 Thêm lớp bóng và chỉnh offset X/Y, blur, spread.
- 2 Đổi màu và tùy chọn inset trong khi kiểm tra bản xem trước.
- 3 Sao chép mã CSS box-shadow đã tạo vào stylesheet.
Trường hợp sử dụng phổ biến
- Tạo CSS box-shadow cho thẻ
- Chỉnh nhiều lớp bóng
- Sao chép giá trị bóng bên trong
Câu hỏi thường gặp
Tôi có thể chỉnh những giá trị bóng nào?
Bạn có thể chỉnh offset X/Y, blur, spread, màu, opacity, inset và thêm hoặc xóa nhiều lớp bóng.
CSS box-shadow tạo ra có dùng trực tiếp được không?
Có. Mã box-shadow hoàn chỉnh hiển thị trong ô kết quả và có thể sao chép vào bộ nhớ tạm.
Bản xem trước có cập nhật khi đổi giá trị không?
Có. Khi chỉnh slider hoặc giá trị màu, hộp xem trước và mã CSS sẽ cập nhật ngay.