Tạo CSS Box Shadow miễn phí
Trình tạo trực quan cho CSS box-shadow với xem trước trực tiếp, xếp lớp nhiều tầng, bảng chọn màu, chuyển đổi inset và sao chép một cú nhấp. Bao gồm cài đặt sẵn Material, neumorphism và glow.
Kéo hộp để định vị bóng của lớp hoạt động - giữ Shift để điều khiển chính xác
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);Mẫu có sẵn
Công dụng phổ biến
- Bóng UI CardTạo bóng thẻ trang nhã cho bảng điều khiển, lưới sản phẩm và bảng điều khiển.
- Hiệu Ứng Nhấn NútTạo bóng nút bắt chước độ sâu thế giới thực và các trạng thái nhấn.
- Neumorphism Soft UITạo giao diện soft-UI neumorphism với các bóng sáng + tối được ghép đôi.
- Bóng Modal và PopoverTạo cảm giác nâng cao, nổi lên cho hộp thoại và menu thả xuống.
- Hiệu Ứng Phát Sáng và Vòng Lấy NétTạo hiệu ứng đơn sắc phát sáng, vòng lấy nét và các điểm nhấn kiểu neon.
Cách hoạt động
Công cụ tạo box-shadow là công cụ React chạy hoàn toàn phía máy khách — không máy chủ, không thư viện. Nó duy trì danh sách các đối tượng lớp bóng trong state, tạo chuỗi CSS box-shadow hợp lệ mỗi khi có thay đổi bằng hàm định dạng rgba() tự viết, và áp dụng trực tiếp lên phần tử xem trước qua prop style của React để bộ máy hiển thị của trình duyệt vẽ kết quả ngay lập tức.
- 1Thông số lớp được đưa vào hàm định dạngMỗi lớp bóng lưu độ lệch x/y, độ mờ, độ lan, màu hex và giá trị độ mờ đục. Mỗi khi thay đổi, một hàm nhỏ shadowToCss chuyển màu hex sang các thành phần RGB bằng regex, rồi tạo chuỗi rgba() — ví dụ, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Nhiều lớp được nối bằng dấu phẩy.
- 2Trình duyệt hiển thị bản xem trước trực tiếpChuỗi đã tạo được gán cho thuộc tính style boxShadow của phần tử div trực tiếp trong JSX. React cập nhật thuộc tính DOM, và bộ máy CSS của trình duyệt vẽ bóng ngay lập tức — không dùng canvas hay WebGL, chỉ hiển thị CSS gốc.
- 3Kéo để định vị dùng Pointer Events APINhấp và kéo hộp xem trước sẽ gọi setPointerCapture trên phần tử, rồi theo dõi độ thay đổi onPointerMove để cập nhật độ lệch x và y của lớp đang chọn theo thời gian thực. Giữ Shift áp dụng hệ số 0,25x để định vị tinh chỉnh.
- 4Đầu ra được sao chép vào bộ nhớ tạmCông cụ tạo hai định dạng đầu ra từ cùng dữ liệu lớp: khai báo CSS box-shadow chuẩn, và lớp giá trị tùy ý của Tailwind (shadow-[...]) trong đó dấu cách được thay bằng dấu gạch dưới theo quy tắc cú pháp của Tailwind. Sao chép một cú nhấp dùng navigator.clipboard.writeText.
Công cụ liên quan
Tạo CSS Border Radius
Thiết kế góc bo tròn một cách trực quan với kiểm soát độc lập cho mỗi góc. Hỗ trợ cú pháp X/Y hình elip cho các hình dạng blob hữu cơ.
Trình Tạo Lưới CSS
Thiết kế trực quan một lưới CSS — các track, đơn vị và khoảng cách — và sao chép CSS và HTML được tạo.
Trình Tạo CSS Flexbox
Thử nghiệm hướng flex, xuống dòng, căn chỉnh trên các mục trực tiếp — và sao chép CSS.