CSS Box Shadow Generator

Thiết kế hiệu ứng đổ bóng (Box Shadow) cho phần tử Web.

▶Về công cụ này

Thiết kế hiệu ứng đổ bóng chuyên nghiệp cho phần tử Web. Tùy chỉnh độ lệch, độ mờ, màu sắc và độ lan tỏa.

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.

 
 
 
 
  
 
 
 
Cách sử dụng
 
     
  1. Chỉnh Offset/Blur
  2. Chọn màu
  3. Sao chép CSS
    4.  
 
 
 
Khi nào nên dùng
 
Khi cần tạo hiệu ứng đổ bóng cho button, card, hoặc bất kỳ phần tử UI nào để tăng chiều sâu.
 
 
 
Ví dụ
 
Tạo bóng mềm cho card, bóng nổi cho button hover, hoặc bóng sâu cho modal overlay.
 
   
 
Công cụ liên quan
  
 
 
Bộ công cụ
 
 
 
Color & Design Set