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âu hỏi thường gặp
 
 
 
CSS Box Shadow Generator miễn phí không?
 
Miễn phí, không cần đăng ký.
 
 
Dữ liệu có gửi lên server?
 
Dữ liệu ở trên thiết bị; chúng tôi không lưu trên máy chủ.
 
 
Trình duyệt hỗ trợ?
 
Đã kiểm tra trên Chrome, Edge, Firefox, Safari bản mới.
 
 
Dùng offline được không?
 
Sau lần tải đầu, hầu hết tính năng hoạt động khi mạng không ổn định.
 
 
Khác CLI/desktop app?
 
CSS Box Shadow Generator là công cụ trực tuyến không cần cài, thay thế CLI hoặc app desktop.
 
 
Khi nào dùng?
 
Dùng khi: 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ụ sử dụng?
 
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.
 
 
Tính năng chính?
 
Real-time Preview, Tùy chỉnh Spread, Mã CSS sạch
 
 
Phân biệt với công cụ tương tự?
 
CSS Box Shadow Generator chạy trên trình duyệt, không cần cài. Dùng khi cần thử nhanh trước khi chuyển sang CLI.
 
 
Từ khóa tìm kiếm
 
bóng đổ, shadow, CSS, thiết kế, 影, box-shadow, カード, デザイン, 影 作り方
 
 
 
 
  
 
Quy trình sử dụng cơ bản
 
     
  1. Chỉnh Offset/Blur
  2. Chọn màu
  3. Sao chép CSS
    4.  
 
 
Tình huống sử 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.
  • 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.
  • Real-time Preview
  • Tùy chỉnh Spread
    •  
 
 
 
Quyền riêng tư & dữ liệu
 
Dữ liệu ở trên thiết bị; chúng tôi không lưu trên máy chủ.
 
 
 
Lưu ý
 
     
  • Luôn kiểm tra lại trước khi dán kết quả lên production
  • Thử cửa sổ ẩn danh nếu extension gây lỗi
  • Đợi xử lý xong khi nhập dữ liệu lớn
    •  
 
 
 
Nội dung học liên quan
  
  
 
 
Công cụ liên quan
  
 
 
Bộ công cụ
 
 
 
Color & Design Set