Tạo Box Shadow CSS — Thiết Lập Bóng Đổ Trực Quan

Box shadow tạo chiều sâu cho các phần tử UI. Thuộc tính CSS box-shadow có nhiều tham số khó hình dung trong đầu. Trình tạo của chúng tôi cho phép thiết lập trực quan.

Cú Pháp Box-shadow

box-shadow: offset-ngang offset-dọc blur spread màu inset. Offset ngang dương = bên phải. Offset dọc dương = xuống dưới. Blur = kích thước chuyển tiếp. Spread = mở rộng. Inset = bóng hướng vào trong.

Xếp Chồng Nhiều Bóng

CSS hỗ trợ nhiều box shadow bằng dấu phẩy. Điều này tạo ra hiệu ứng phức tạp: ánh sáng ngoài mềm mại kết hợp với viền trong tinh tế. Dùng tối đa 2–3 bóng — nhiều hơn trông giả tạo.

Bóng Đổ Thực Tế

Bóng đổ tốt hướng nhất quán theo một hướng ánh sáng. Material Design dùng bóng dựa trên mức độ nâng cao. Bóng đổ tinh tế (offset thấp, blur cao, độ mờ thấp) trông chuyên nghiệp hơn bóng tối lớn.