CSS Box Shadow Generator

Giao diện công cụ

Hướng dẫn thông số

X/Y offset=hướng đổ bóng, Blur=độ mờ, Spread=độ lan tỏa, Màu/Độ trong suốt=diện mạo. Xem trước cập nhật thời gian thực.

15%
Bóng đổ sẽ hiện ở đây 
  
 
 
  
  
 
 

Làm thế nào để tạo Box Shadow (Đổ bóng) đẹp?

 
 
 
Nguyên tắc đổ bóng tự nhiên
 

Trong thực tế, bóng đổ hiếm khi có màu đen thuần khiết. Để tạo ra bóng đổ trông chuyên nghiệp và tự nhiên, hãy sử dụng màu tối của chính màu nền hoặc một màu xanh đen nhạt với độ trong suốt thấp (Opacity 10-20%).

 
 
 
Ý nghĩa các thông số
 
     
  • Offset X/Y: Di chuyển bóng theo chiều ngang hoặc dọc để mô phỏng hướng ánh sáng.
    •  
  • Blur: Giá trị càng cao, bóng càng mềm và lan tỏa rộng, tạo cảm giác vật thể nằm cao hơn so với bề mặt.
    •  
  • Spread: Tăng hoặc giảm kích thước tổng thể của vùng đổ bóng.
    •  
 
 
 
Sử dụng trong UI Design
 

Bóng đổ thường được dùng để tạo Elevation (Độ cao). Ví dụ: Card có bóng đổ nhẹ sẽ nổi bật hơn trên nền phẳng, giúp người dùng nhận biết đó là một thành phần có thể tương tác.