Giới thiệu CSS Glassmorphism Generator
Glassmorphism (Kính mờ) là gì trong UI Design?
Glassmorphism là một xu hướng thiết kế giao diện cực kỳ bùng nổ, đặc trưng bởi hiệu ứng kính mờ trong suốt, cho phép màu sắc và hình khối phía sau xuyên thấu qua một lớp nền mờ ảo. Phong cách này được Apple áp dụng mạnh mẽ trên iOS, macOS và sau đó là Microsoft với Windows 11 (Fluent Design). Các lớp Layer kính mờ giúp giao diện có chiều sâu không gian (Hierarchy) mà vẫn giữ được sự nhẹ nhàng, thanh thoát.
Cách tạo hiệu ứng Kính mờ bằng CSS (backdrop-filter)
Để tạo hiệu ứng Glassmorphism, thuộc tính cốt lõi trong CSS là backdrop-filter: blur(). Khác với filter: blur() làm mờ chính phần tử đó, backdrop-filter chỉ làm mờ những nội dung nằm ngay phía sau phần tử.
Một công thức Glassmorphism chuẩn mực bao gồm 4 yếu tố:
- Background: Phải là màu trong suốt (Thường dùng
rgba(255, 255, 255, 0.1)). - Backdrop-filter: Độ mờ (blur) để tán xạ ánh sáng nền.
- Border (Viền): Một lớp viền trắng rất mỏng (
1px solid rgba(255, 255, 255, 0.2)) để mô phỏng sự phản chiếu ánh sáng ở mép kính. - Box-shadow: Bóng đổ mờ giúp tách biệt tấm kính với nền.
Hướng dẫn sử dụng công cụ Glassmorphism Generator
Thay vì phải gõ thủ công và thử sai liên tục để tìm ra thông số đẹp:
- Chọn Màu kính (Thường là Trắng hoặc Đen) và điều chỉnh độ trong suốt (Opacity) khoảng 10-20%.
- Tăng độ mờ (Blur) từ 10px đến 20px tùy thuộc vào độ chi tiết của ảnh nền phía sau.
- Bật viền phản chiếu (Glossy Border) để tấm kính trông chân thực hơn.
- Copy toàn bộ đoạn mã CSS và dán trực tiếp vào thẻ HTML của bạn.