Tạo đổ bóng CSS trực quan
Đổ bóng tạo chiều sâu cho giao diện: làm nổi bật các thẻ (card) trên trang, cho biết nút nào đang được nhấn và tách biệt hộp thoại (dialog) với nội dung nền. Thuộc tính box-shadow trong CSS rất mạnh mẽ nhưng 5 thông số của nó lại khá khó để tinh chỉnh mò. Công cụ tạo đổ bóng này cung cấp các thanh trượt và tính năng xem trước trực tiếp, cho phép bạn xếp chồng nhiều lớp bóng để có hiệu ứng tự nhiên, đồng thời xuất ra mã CSS chuẩn xác để dán ngay vào dự án.
Tính năng
- Tùy chỉnh offset, blur, spread, màu sắc và độ mờ (opacity) với chế độ xem trước tức thì.
- Kết hợp tối đa 5 lớp trong một khai báo
box-shadow. - Đổ bóng trong (Inset shadow) cho hiệu ứng nhấn chìm và lõm xuống.
- Tùy chỉnh bo góc (corner radius) và màu sắc xem trước để phù hợp với thiết kế của bạn.
- Các mẫu có sẵn (Presets) cho bóng mềm, vừa, cứng, xếp lớp, bóng trong và hiệu ứng phát sáng (glow).
- Mã CSS sẵn sàng để sao chép với màu sắc ở định dạng
rgba().
Ví dụ
Một lớp đổ bóng xếp lớp trông tự nhiên trên nền sáng:
.card {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
0px 4px 8px 0px rgba(0, 0, 0, 0.07),
0px 16px 32px 0px rgba(0, 0, 0, 0.07);
border-radius: 16px;
}
Mẹo thiết kế đổ bóng
| Mục đích | Thông số gợi ý |
|---|---|
| Thẻ (card) nổi nhẹ trên nền trắng | y 4, blur 12, opacity 8% |
| Dropdown hoặc hộp thoại (dialog) nổi | 2–3 lớp, y tối đa 24, blur tối đa 48, opacity 7–12% mỗi lớp |
| Phong cách "phẳng" (flat) retro | x 6, y 6, blur 0, opacity 100% |
| Hiệu ứng focus hoặc phát sáng (glow) | x 0, y 0, blur 16–24, spread 2–4, màu thương hiệu |
| Ô nhập liệu (input) đang được nhấn | inset, y 2, blur 6, opacity 25–30% |
Giữ nguồn sáng nhất quán: nếu bóng đổ xuống dưới ở một thành phần, chúng cũng phải đổ xuống dưới ở mọi nơi khác.
Công cụ liên quan
Tạo nền cho thẻ của bạn bằng Trình tạo CSS Gradient, chuyển đổi mã màu giữa HEX, RGB và HSL bằng Trình chuyển đổi màu, hoặc lấy mã màu từ ảnh chụp màn hình bằng Trình chọn màu từ ảnh.