Trình tạo bóng hộp CSS
Tạo các giá trị bóng hộp một cách trực quan. Đặt độ lệch ngang và dọc theo pixel, bán kính mờ (cạnh mềm), độ trải rộng (tăng hoặc thu nhỏ bóng trước khi làm mờ), màu sắc, độ mờ và phần chèn tùy chọn cho bóng bên trong. Hộp xem trước cập nhật trực tiếp; sao chép toàn bộ khai báo box-shadow vào CSS của bạn. Hiểu cách mỗi tham số thay đổi độ cao và độ sâu mà không cần thử và sai trong devtools.
X (px)
Y (px)
Blur (px)
Spread (px)
Màu
Độ mờ (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
Cách tạo bóng hộp
1. Đặt độ lệch X và Y — X dương di chuyển bóng sang phải, Y dương di chuyển bóng xuống.
2. Điều chỉnh độ mờ (độ mềm) và độ lan tỏa (kích thước trước khi mờ).
3. Chọn màu bóng và độ mờ.
4. Chuyển đổi phần chèn nếu bóng sẽ xuất hiện bên trong hộp; sao chép CSS.
Công thức tạo bóng
Nâng cao thẻ mềm
offsetY 8px, làm mờ 24px, trải 0, màu đen với độ mờ 18% — a Thẻ nổi kiểu Material: box-shadow: 0 8px 24px rgba(20,20,20,0.18).
Bóng đổ sắc nét
blur 0, trải 0, offsetY 4px — cạnh cứng như nhãn dán nhấc lên một chút khỏi page.
Nút nhấn vào trong
Bật phần chèn với độ mờ nhỏ — mô phỏng một điều khiển được nhấn hoặc lõm vào bên trong phần tử.
Khi nào nên dùng công cụ này
• Khi bạn điều chỉnh độ sâu giao diện người dùng cho thẻ, phương thức và nút.
• Khi bạn tìm hiểu độ mờ khác với độ trải rộng như thế nào.
• Khi bạn ghi lại các mã thông báo thiết kế với các giá trị bóng chính xác.
Khi nào nên chọn công cụ khác
• Khi bạn cần nhiều bóng xếp chồng — hãy sao chép lớp đầu tiên tại đây, sau đó thêm lớp khác vào CSS.
• Khi bạn muốn bóng văn bản — thuộc tính khác có giá trị tương tự cú pháp.
• Khi bạn cần đổ bóng trên các hình dạng PNG không đều — bộ lọc: drop-shadow() có thể hoạt động tốt hơn.
Đọc bốn số
box-shadow: 0 8px 24px 0 có nghĩa là x=0, y=8px xuống, Blur=24px, spread=0. Bỏ qua mức chênh lệch và mức chênh lệch mặc định của trình duyệt về 0. Độ mờ lớn với độ lệch bằng 0 sẽ tạo ra ánh sáng; độ lệch lớn với độ mờ nhỏ tạo ra ánh sáng định hướng.
Phân lớp bóng
Nhiều bóng được phân tách bằng dấu phẩy: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15); Sơn bóng đầu tiên bên dưới những cái sau. Kết hợp bóng tối đậm với bóng sáng rộng để có độ sâu chân thực.
Khả năng truy cập và hiệu suất
Bóng đậm trên các vùng hoạt ảnh lớn có thể tốn thời gian vẽ GPU. Ưu tiên các bóng tinh tế cho giao diện người dùng dày đặc dữ liệu. Đảm bảo các phần tử được lấy nét vẫn hiển thị — không chỉ dựa vào bóng để hiển thị trạng thái; ghép nối với đường viền hoặc đường viền cho người dùng bàn phím.
Câu hỏi thường gặp
Cú pháp bóng hộp là gì?
box-shadow: offset-x offset-y màu mờ bán kính trải rộng bán kính mờ; Từ khóa chèn tùy chọn tạo bóng bên trong.
Làm mờ so với trải rộng?
Blur làm mềm cạnh bóng. Trải rộng hoặc thu hẹp hình dạng bóng trước khi làm mờ — mức lan truyền dương mở rộng, thu nhỏ âm.
Tôi nên sử dụng đơn vị nào?
Công cụ này xuất ra pixel (px), lựa chọn phổ biến nhất cho bóng giao diện người dùng màn hình.
Inset làm gì?
Inset vẽ bóng bên trong hộp viền phần tử — hữu ích cho các đầu vào chìm hoặc giếng.
Màu bóng có thể bán trong suốt không?
Có. Độ mờ được áp dụng cho màu đã chọn, tạo ra đầu ra rgba để có các cạnh mượt mà trên các nền khác nhau.
Các giá trị có được gửi đến máy chủ không?
Không. Xem trước và CSS là cục bộ.
Cái này có miễn phí không?
Có, không cần tài khoản.