DRATINITECH
Phòng Thí Nghiệm Giao Diện Trên Trình Duyệt

Trình Tạo Glassmorphism & Neumorphism

Điều chỉnh blur, opacity, độ sâu bóng và góc chiếu sáng theo thời gian thực, rồi sao chép CSS hoặc Tailwind gọn gàng cho giao diện hiện đại.

Bảng Điều Khiển

Chuyển đổi phong cách và tinh chỉnh trọng lượng thị giác, hướng sáng và độ mềm cho đến khi panel đạt cảm giác phù hợp.

Độ Mờ24px
Độ Đục18%
Độ Bão Hòa165%
Bo Góc28px
Độ Đục Viền22%
Độ Sâu Bóng38
Độ Mờ Bóng52px
Khoảng Cách Bóng18px
Góc Chiếu Sáng135deg
Xem Trước Trực Tiếp
Glassmorphism
28px
Bề Mặt Giao Diện
Sẵn sàng cho thẻ hero, bảng cài đặt, lớp phủ và các điều khiển có cảm giác chạm.
Độ Mờ
24px
Độ Sâu
38
Độ Đục
18%
Góc
135deg
Vòng Lặp Thiết Kế
0s

Bản xem trước cập nhật ngay khi bạn điều chỉnh từng thanh điều khiển.

Chế Độ Xuất
2

Sao chép CSS hoặc class Tailwind đã tinh chỉnh mà không cần dọn dẹp thủ công.

Kết Xuất
Cục Bộ

Mọi thứ chạy ngay trên trình duyệt, phù hợp cho các phiên dựng mẫu riêng tư.

Tình Huống Phù Hợp

Dùng glassmorphism cho lớp phủ, onboarding và bề mặt hero. Dùng neumorphism cho điều khiển có cảm giác chạm, bảng cài đặt và các khối dashboard nhẹ nhàng.

Vì Sao Dễ Được Lập Chỉ Mục

Trang cung cấp mô tả tính năng rõ ràng, mã đầu ra và FAQ để cả công cụ tìm kiếm lẫn hệ thống sinh nội dung có thể hiểu nhanh về công cụ.

CSS

Sao chép một khối CSS gọn cho style component, landing page hoặc thử nghiệm token của design system.

.glass-panel {
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: -13px 13px 52px rgba(15, 23, 42, 0.54), inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
}
Tailwind

Sao chép phiên bản utility-first khi bạn muốn làm việc hoàn toàn trong lớp component của Tailwind.

rounded-[28px] border border-white/-[0.22] bg-white/-[0.18] backdrop-blur-[24px] shadow-[-13px_13px_52px_rgba(15,23,42,0.54)] supports--[backdrop-filter]:backdrop-saturate-[165%]
FAQ Nhanh
Khi nào nên chọn glassmorphism?

Hãy chọn khi bạn muốn độ trong suốt nhiều lớp, chiều sâu và nền đầy màu sắc vẫn hiển thị phía sau giao diện.

Khi nào nên chọn neumorphism?

Hãy chọn cho các điều khiển có cảm giác chạm và bề mặt nhẹ nhàng, nơi hình khối được xác định chủ yếu bằng ánh sáng và bóng thay vì viền cứng.

Mã đã sao chép có cần dọn lại không?

Không. Trình tạo xuất ra các đoạn mã ngắn gọn để dán trực tiếp vào stylesheet của component hoặc danh sách class Tailwind.