✨

Trình Tạo Đổ Bóng Đa Lớp Mềm Mại & Kính Mờ CSS Pro

Nội suy bóng đa tầng chuẩn Stripe & Apple, Glassmorphism, xuất CSS & Tailwind 100% Client-Side

Mẫu Đổ Bóng Sẵn Có

| |

🥞

Đổ Bóng Mịn Đa Tầng (Smooth Multi-Layer) Phân rã bóng thành 3 - 6 lớp mờ tự nhiên như Stripe & Apple

Thông Số Ánh Sáng & Tọa Độ Bóng

Độ lệch ngang (X-Offset)

Độ lệch dọc (Y-Offset)

Độ nhòe mờ (Blur Radius)

Độ lan tỏa (Spread Radius)

Độ đậm bóng (Opacity)

Màu sắc bóng đổ

Kính Mờ (Glassmorphism) & Bo Góc

Độ mờ hậu cảnh (Blur)

Bo góc (Border Radius)

Nền:

Số lớp bóng đang vẽ:

Xuất Mã Nguồn

Bảo Mật Cấp Doanh Nghiệp Trên Trình Duyệt 100% Trình Duyệt

Không thu thập dữ liệu, không lưu trữ đám mây. Mã nguồn, mật khẩu và tài liệu của bạn được bảo vệ 100% tại máy khách.

✓ Cách Tạo Bóng Đa Lớp & Kính Mờ Trong 3 Bước Nhanh Gọn

1 Bước 1

Chọn Mẫu Sẵn Hoặc Tùy Chỉnh Tọa Độ

Chọn nhanh preset (Card Level 1, Modal Level 4, Stripe Flow) hoặc kéo các thanh trượt trục X, Y, Blur và Spread.

2 Bước 2

Bật Đa Tầng (Smooth Multi-Layer) & Kính Mờ

Kích hoạt tùy chọn Đa Lớp (3L-6L) để phân rã bóng mờ tự nhiên và bật Glassmorphism nếu muốn làm mờ hậu cảnh.

3 Bước 3

Kiểm Thử Nền Sandbox & Sao Chép Mã

Xem trước trên nền Dark Mode hoặc Gradient, rồi bấm sao chép mã CSS thuần hoặc Tailwind CSS class.

? Câu Hỏi Thường Gặp (FAQ)

Q1 Tại sao việc dùng bóng màu đen thuần túy rgba(0,0,0,0.5) lại làm giao diện bị đục và bẩn?

Khi đổ bóng màu đen lên nền có màu, sự hòa trộn alpha tạo ra dải viền xám tro đục ngầu mất tự nhiên. Hãy lấy chính tông màu nền hoặc màu của phần tử, tăng độ bão hòa và giảm độ sáng để làm màu bóng đổ.

Q2 Sử dụng 4 đến 6 lớp box-shadow có làm tụt khung hình FPS hay làm chậm trình duyệt không?

Không. Trình duyệt hiện đại tăng tốc phần cứng GPU render đa lớp tĩnh rất nhẹ nhàng. Tránh transition trực tiếp trên thuộc tính box-shadow; hãy animate opacity trên pseudo-element ::after.

Q3 Làm sao để hiệu ứng kính mờ (Backdrop Blur) hoạt động mượt mà trên iPhone và Safari Mac?

Apple Safari yêu cầu tiền tố riêng là -webkit-backdrop-filter: blur(...). Công cụ tự động bổ sung đầy đủ cả tiền tố webkit và thuộc tính chuẩn W3C.

Q4 Chỉ số Spread Radius (Bán kính lan tỏa) âm có tác dụng gì trong thiết kế giao diện hiện đại?

Bán kính lan tỏa âm co hẹp bóng so với chu vi thẻ, ngăn bóng tràn lem nhem sang hai bên mép và tập trung êm ái ở đáy, tạo cảm giác thẻ được nhấc bổng tinh tế.

Q5 Thuộc tính inset trong box-shadow hoạt động như thế nào?

Từ khóa inset đảo bóng đổ vào bên trong khung phần tử, tạo cảm giác bề mặt bị khoét rãnh hoặc ấn lõm xuống, rất phù hợp cho ô tìm kiếm và nút bấm Neumorphism.

Hệ Sinh Thái