Miễn phí tốt nhất Tạo bóng hộp CSS
Tạo hình ảnh CSS box-shadow với xem trước trực tiếp, inset và một lớp thứ hai - sao chép mã.
100% miễn phí
Không đăng ký
Không dấu nước
✨
Go Pro cho các mô hình AI tốt nhất - hình ảnh, video và chat - cộng với các tải lên lớn hơn, ưu tiên trong hàng đợi và không chờ đợi.
Tăng cấp lên Pro
Tình yêu Best.Free? Chia sẻ đi.
Làm thế nào để làm
- Đưa các thanh trượt. Đặt độ lệch, mờ, lan rộng, màu và độ mờ; bật/ tắt lồng nếu muốn bóng bên trong.
- Xem xem thử. Hộp động cập nhật khi bạn kéo; thêm lớp thứ hai trong tùy chọn Cao cấp cho độ sâu.
- Sao chép CSS. Nhấn Copy CSS và dán quy tắc hộp bóng vào bảng kiểu dáng của bạn.
Về công cụ này
Thiết kế một bóng hộp mà không cần đoán giá trị điểm ảnh. Kéo các trượt xoay X, Y, mờ và lan rộng, chọn màu bóng và điều chỉnh độ mờ, và xem hộp xem trước trực tiếp cập nhật thời gian thực - sau đó sao chép chính xác CSS bóng hộp. Đổi đổi chuyển đổi inset cho bóng bên trong. Tùy chọn cao cấp xếp một lớp bóng thứ hai, vì vậy bạn có thể xây dựng bóng mềm, nhiều lớp được sử dụng trên thẻ và nút hiện đại. Mọi thứ chạy trong trình duyệt của bạn.
Người ta dùng nó làm gì?
- Thêm bóng mềm vào thẻ và các phương thức
- Tạo bóng bên trong (inset) cho đầu vào và hố
- Xếp hai lớp lại để tạo một bóng tối thực tế, phân tán
- Điều chỉnh độ lệch và mờ để phù hợp với mô hình thiết kế
Câu hỏi thường gặp
Độ lệch X/ Y di chuyển bóng tối theo chiều ngang và dọc, độ mờ làm mềm viền của nó, và độ rộng làm tăng hay giảm toàn bộ bóng tối trước khi độ mờ được áp dụng. Xem trước trực tiếp hiển thị mỗi thay đổi ngay lập tức.
Insert vẽ bóng bên trong yếu tố thay vì sau nó, tạo ra một vẻ bề ngoài như bị nhấn vào - hữu ích cho đầu vào và chuyển đổi. Đổi đổi giá trị Insert để chuyển đổi.
Chọn một màu, sau đó dùng trượt độ mờ; công cụ này sẽ xuất giá trị rgba() để bóng tối hòa trộn tự nhiên.
Có. Mở tùy chọn Cao cấp để bật lớp bóng thứ hai với độ lệch, mờ, màu và lồng riêng của nó.
Không. Thiết bị tạo chạy hoàn toàn trong trình duyệt của bạn; các thanh trượt chỉ tính toán một chuỗi CSS ở địa phương.
Hoàn toàn miễn phí, không tài khoản và không giới hạn - một công cụ bên khách hàng không có gì để đo.
Có. Nó chạy trong trình duyệt của bạn, vì vậy CSS Box Shadow Generator hoạt động trên điện thoại và máy tính bảng cũng như máy tính - không có ứng dụng nào cần cài đặt.
Thường chỉ vài giây cho một tập tin điển hình - CSS Box Shadow Generator bắt đầu làm việc ngay khi bạn đưa vào.
Sử dụng thường xuyên là không giới hạn, dưới một cái mũ sử dụng công bằng hào phóng mà giữ nó nhanh cho mọi người.
Tất cả các trình duyệt hiện đại - Chrome, Safari, Firefox và Edge. CSS Box Shadow Generator không cần cài đặt gì ngoài trình duyệt bạn đã sử dụng.