Tạo Box Shadow
Công cụ tạo box-shadow CSS miễn phí trực tuyến, xem trước theo thời gian thự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.