Trình tạo đổ bóng (box-shadow) cho phép bạn điều chỉnh hiệu ứng bóng theo thời gian thực bằng thanh trượt, hỗ trợ nhiều lớp bóng chồng nhau và cung cấp 8 mẫu có sẵn được tuyển chọn gồm Material, Neumorphism và Neon — rồi sao chép CSS ngay lập tức.
Tính năng
- 5 tham số điều chỉnh được: độ lệch X (trái/phải), độ lệch Y (lên/xuống), bán kính làm mờ (độ mềm của mép), bán kính lan (kích thước tổng thể) và độ mờ đục — mỗi tham số có thanh trượt riêng.
- Bóng nhiều lớp: nhấp “Thêm lớp bóng” để xếp chồng nhiều bóng — thiết kế thực tế thường dùng 2–3 lớp để có chiều sâu tự nhiên hơn (như trong Material Design).
- Bóng bên trong (Inset): bật Inset để lật bóng vào bên trong phần tử — rất hợp hiệu ứng nút bị nhấn hoặc thẻ lõm.
- 3 nền xem trước: chuyển giữa nền Sáng, Tối và Chuyển sắc để kiểm tra bóng trông thế nào trên các bề mặt khác nhau.
- 8 mẫu có sẵn được tuyển chọn: Flat, Subtle, Card, Material (3 lớp), Dramatic, Neon Blue, Neumorphism và Inset.
- Sao chép CSS một cú nhấp: nhận cú pháp đầy đủ box-shadow: ...; sẵn sàng dán vào bất kỳ tệp CSS, prop style của Tailwind hay công cụ thiết kế nào.
Cách sử dụng
- Dùng thanh trượt chỉnh độ lệch, độ mờ, độ lan và độ mờ đục — bản xem trước cập nhật ngay.
- Để chiều sâu tự nhiên hơn, thêm lớp bóng hoặc bật Inset để có bóng bên trong.
- Nhấp sao chép và dán CSS vào dự án của bạn.
