🔲 Công cụ tạo CSS Box-Shadow
Lấy mã CSS box-shadow trong vài giây — không cần cài đặt, không cần tài khoản, không cần mạng. Kéo thanh trượt để thiết lập offset, blur, spread, màu sắc và opacity cho từng lớp bóng, xem bản xem trước cập nhật tức thì, rồi sao chép CSS đã sẵn sàng dán vào.
Preview
Giới thiệu
Công cụ này chạy hoàn toàn trong trình duyệt bằng JavaScript thuần — thiết kế của bạn không bao giờ rời khỏi thiết bị. Bạn có thể chồng nhiều lớp bóng để tạo hiệu ứng chiều sâu, neumorphism, glow, hoặc bóng thẻ tinh tế. Mỗi lớp hỗ trợ bóng inset cho hiệu ứng phát sáng bên trong hoặc nút nhấn. Kết quả là CSS chuẩn có thể dán thẳng vào bất kỳ stylesheet, framework hay design token nào.
Cách sử dụng
- Nhấn '+ Add Shadow' để tạo lớp bóng đầu tiên của bạn.
- Dùng các thanh trượt Offset X, Offset Y, Blur, Spread và Opacity để định hình từng lớp bóng. Bật 'Inset' để tạo hiệu ứng bóng bên trong.
- Nhấn vào ô màu để chọn màu bóng. Bản xem trước cập nhật ngay khi bạn điều chỉnh bất kỳ thông số nào.
- Thêm nhiều lớp hơn để tạo hiệu ứng đa bóng phức tạp như neumorphism hoặc glow chồng nhau.
- Nhấn 'Copy CSS' để sao chép toàn bộ khai báo box-shadow và dán vào stylesheet của bạn.
Câu hỏi thường gặp
- Công cụ tạo CSS box-shadow này có miễn phí không?
- Hoàn toàn miễn phí. Không cần tài khoản, không có giai đoạn dùng thử, không phí ẩn — chỉ cần mở trang và bắt đầu tạo bóng ngay.
- Công cụ có hoạt động ngoại tuyến, không cần kết nối internet không?
- Có. Công cụ chạy hoàn toàn trong trình duyệt mà không gọi đến máy chủ. Sau khi trang tải xong, bạn có thể ngắt kết nối mạng và công cụ vẫn hoạt động hoàn hảo.
- Dữ liệu thiết kế của tôi có riêng tư không? Có gì được tải lên máy chủ không?
- Không có gì được tải lên. Tất cả cài đặt bóng được xử lý cục bộ trong trình duyệt và chỉ lưu vào localStorage. Không có dữ liệu nào rời khỏi thiết bị của bạn.
- Tôi có thể chồng nhiều bóng trong một quy tắc CSS không?
- Có. Nhấn '+ Add Shadow' bao nhiêu lần tùy ý. Công cụ gộp tất cả lớp thành một giá trị box-shadow phân cách bằng dấu phẩy — hoàn hảo cho neumorphism, hiệu ứng glow hoặc chiều sâu đa hướng.
- Làm thế nào để tạo hiệu ứng bóng inset (bên trong)?
- Tích vào ô 'Inset' trên bất kỳ lớp bóng nào. Bóng inset hiển thị bên trong ranh giới phần tử, hữu ích cho trạng thái nút nhấn hoặc hiệu ứng phát sáng bên trong. CSS được tạo sẽ tự động bao gồm từ khóa 'inset'.