Về công cụ này
Thuộc tính box-shadow sâu hơn vẻ ngoài: offset, blur, spread, màu và từ khóa inset đều tương tác nhau, và độ sâu thật thường đến từ việc xếp chồng nhiều bóng. Bộ tạo này cho bạn một thanh trượt cho mỗi giá trị và cho thêm nhiều lớp, nên bạn dựng được từ hiệu ứng nâng card tinh tế đến hiệu ứng neumorphic đậm.
Mọi thứ cập nhật trong khung xem trước trực tiếp, và đoạn CSS box-shadow hoàn chỉnh chỉ cách một cú copy. Nó chạy hoàn toàn trong trình duyệt.
Câu hỏi thường gặp
Công cụ có hỗ trợ xếp chồng nhiều bóng đổ không?
Có. Nhấn 'Add Layer' để thêm các lớp bóng đổ chồng lên nhau — chúng sẽ được gộp thành một giá trị box-shadow phân tách bằng dấu phẩy, với lớp đầu tiên hiển thị trên cùng.
Ô tick 'inset' có tác dụng gì?
Nó chuyển lớp đó từ bóng đổ ra ngoài sang bóng đổ vào trong, xuất hiện bên trong viền của phần tử — hữu ích để tạo hiệu ứng lõm hoặc bị nhấn.
Độ trong suốt của bóng đổ được xử lý thế nào?
Thanh trượt độ mờ được kết hợp với bộ chọn màu thành một mã màu hex 8 ký tự (#rrggbbaa) để có độ trong suốt alpha thực sự, vì ô chọn màu thông thường không lưu được kênh alpha.
Dữ liệu thiết kế của tôi có được tải lên đâu không?
Không, bản xem trước bóng đổ và CSS xuất ra đều được tạo hoàn toàn trong trình duyệt của bạn — không có gì được tải lên hay lưu trên máy chủ.
Giá trị spread âm có tác dụng gì?
Spread âm sẽ thu nhỏ hình dạng bóng đổ trước khi làm mờ, thường dùng để làm bóng trông mỏng hơn hoặc sát hơn so với chính phần tử.