Tạo CSS box-shadow nhiều lớp với live preview — điều chỉnh offset, blur, spread, màu/alpha, copy CSS hoặc Tailwind
Presets
Shadow Layers 2/6
0px 10px 15px -3px rgba(0,0,0,0.10)
CSS Output
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.10), 0px 4px 6px -4px rgba(0,0,0,0.10);
shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.10),0px_4px_6px_-4px_rgba(0,0,0,0.10)]
Live Preview
Layer Summary
Layer 1
0px 10px 15px -3px rgba(0,0,0,0.10)
Layer 2
0px 4px 6px -4px rgba(0,0,0,0.10)
Điểm nổi bật
Các điểm đáng chú ý nhất của công cụ này để bạn nắm nhanh trước khi dùng.
Thêm nhiều shadow layer chồng lên nhau để tạo hiệu ứng chiều sâu phức tạp và tự nhiên hơn.
Kéo thanh trượt để thay đổi offsetX, offsetY, blur, spread và opacity — kết quả cập nhật ngay tức thì.
Chọn từ 6 preset được thiết kế sẵn: Subtle, Card, Elevated, Deep, Glow và Inner shadow.
Xuất giá trị box-shadow hoàn chỉnh sẵn sàng dán vào stylesheet hoặc Tailwind config.
Cách sử dụng
Làm theo từng bước để dùng công cụ nhanh và đúng intent ngay từ lần đầu.
Click vào một trong 6 preset để làm điểm khởi đầu, hoặc thêm layer mới và tùy chỉnh từ số 0.
Dùng slider để thay đổi offsetX/Y (hướng đổ bóng), blur (độ mờ), spread (độ lan) và chọn màu bóng.
Nhấn "Thêm layer" để tạo shadow thứ hai, thứ ba — layering nhiều shadow mịn hơn là dùng một shadow to.
Nhấn copy để lấy code CSS box-shadow hoàn chỉnh.
Câu hỏi thường gặp
Những câu hỏi gặp nhiều nhất khi dùng công cụ, được trình bày ngắn gọn và dễ quét.