Xem trước
✦
Glass Card
Glassmorphism UI
Hiệu ứng frosted glass với backdrop-filter blur và transparent background.
Glass Card
Glassmorphism UI
Hiệu ứng frosted glass với backdrop-filter blur và transparent background.
Glassmorphism Generator giúp bạn tạo hiệu ứng kính mờ (frosted glass) cho UI elements. Điều chỉnh blur, transparency, border và shadow rồi copy ngay CSS backdrop-filter.
Trend UI hiện đại
Glassmorphism là xu hướng thiết kế phổ biến trong iOS, macOS và web app hiện đại.
Depth & hierarchy
Hiệu ứng trong suốt và mờ tạo chiều sâu visual, phân cấp nội dung rõ ràng.
Đẹp trên gradient
Hoạt động tốt nhất trên nền ảnh hoặc gradient màu sắc rực rỡ.
CSS thuần
Chỉ cần backdrop-filter và một vài thuộc tính CSS cơ bản.
01
Chỉnh Blur
Điều chỉnh backdrop-filter blur để kiểm soát độ mờ của nền.
02
Chỉnh Transparency
Điều chỉnh alpha của background color để kiểm soát độ trong suốt.
03
Thêm Border
Border bán trong suốt tạo viền sáng đặc trưng của glassmorphism.
04
Export CSS
Copy toàn bộ CSS để áp dụng cho component của bạn.
Backdrop Filter Blur
Làm mờ nội dung phía sau element. Giá trị 8–16px là phổ biến nhất.
Background Opacity
Độ trong suốt của background. Thường 10–30% để tạo cảm giác kính.
Border
1px solid rgba(255,255,255,0.2) tạo viền sáng mỏng đặc trưng.
Border Radius
Bo tròn góc để tạo cảm giác card hiện đại.
UI Designer
Thử nghiệm nhanh nhiều biến thể glassmorphism mà không cần code.
Developer
Copy CSS chính xác với đầy đủ vendor prefix và fallback.
Creativity
Khám phá hiệu ứng glassmorphism với nhiều màu nền khác nhau.