Trình tạo bóng đen hình hộp
Công cụ tạo mã CSS box-shadow miễn phí trực tuyến, có chức năng xem trước ngay lập tức.
Cú pháp CSS box-shadow
Thuộc tính CSS box-shadow thêm hiệu ứng đổ bóng xung quanh phần tử. Cú pháp: box-shadow: [inset] offset-x offset-y blur spread color. Nhiều bóng có thể được phân tách bằng dấu phẩy. Sử dụng trình chỉnh sửa trực quan để điều chỉnh giá trị và xem kết quả theo thời gian thực.
Cách sử dụng Box Shadow Generator
Điều chỉnh thanh trượt cho offset X, offset Y, blur radius và spread radius. Chọn màu bóng và bật/tắt tùy chọn inset. Mã CSS được tạo cập nhật theo thời gian thực và có thể được sao chép vào clipboard.
▶Sự khác biệt giữa blur và spread là gì?
Blur kiểm soát độ mềm của cạnh bóng (0 = cạnh sắc, giá trị cao = mềm hơn). Spread mở rộng hoặc thu nhỏ bóng theo mọi hướng. Spread dương làm cho bóng lớn hơn phần tử.
▶Tôi có thể thêm nhiều bóng không?
Có, CSS hỗ trợ nhiều bóng phân tách bằng dấu phẩy: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);. Kết hợp bóng tinh tế cho hiệu ứng chiều sâu chân thực hơn.
▶Inset shadow làm gì?
Inset bóng xuất hiện bên trong phần tử thay vì bên ngoài. Nó tạo ấn tượng rằng phần tử bị ép vào trong, như trường văn bản hoặc nút lõm.
Nếu công cụ này đã giúp ích cho bạn, hãy nghĩ đến việc mua một cốc cà phê cho tôi.
Hãy mua cho tôi một cốc cà phê nhé.