Glassmorphism Generator

Glassmorphism Generator - Hieu Ung Kinh Mo CSS

Tạo hiệu ứng glassmorphism tuyệt đẹp cho thiết kế web của bạn. Công cụ này tạo mã CSS cho xu hướng giao diện kính mờ, bao gồm backdrop blur, độ trong suốt và viền tinh tế tạo chiều sâu và phân cấp thị giác. Sao chép quy tắc .glass đầy đủ sẵn dán, kèm dự phòng @supports để trình duyệt không hỗ trợ vẫn dễ đọc.

Glassmorphism la gi?

Glassmorphism la xu huong thiet ke UI hien dai tao hieu ung kinh mo. No su dung:

- Nen ban trong suot
- Bo loc backdrop blur
- Vien tinh te de dinh nghia canh
- Bong mem de tao chieu sau

Phong cach nay tro nen pho bien tu 2020-2021 va duoc Apple, Microsoft va nhieu ung dung web hien dai su dung.

Backdrop-filter hoat dong nhu the nao?

Thuoc tinh CSS backdrop-filter ap dung hieu ung cho vung phia sau phan tu:

blur(10px) - Tao hieu ung kinh mo
saturate(180%) - Tang cuong mau sac phia sau
brightness() - Dieu chinh do sang
contrast() - Dieu chinh do tuong phan

Quan trong: Phan tu phai co nen ban trong suot de hieu ung hien thi.

Trinh duyet nao ho tro glassmorphism?

Ho tro backdrop-filter:

Chrome 76+ (ho tro day du)
Firefox 103+ (ho tro day du)
Safari 9+ (can tien to -webkit-)
Edge 79+ (ho tro day du)
Opera 63+ (ho tro day du)

Luon them tien to -webkit- cho Safari.

Thuc hanh tot nhat cho thiet ke glassmorphism

Meo su dung glassmorphism hieu qua:

1. Su dung tren nen nhieu mau - Hieu ung hoat dong tot nhat tren gradient hoac hinh anh
2. Giu blur vua phai (8-20px)
3. Su dung do trong suot tinh te (15-30%)
4. Them vien mong - Giup xac dinh canh
5. Xem xet do tuong phan - Dam bao van ban de doc
6. Su dung tiet kiem - Qua nhieu phan tu kinh co the gay roi

Vì sao hiệu ứng glass không hiện trên Safari iOS nhưng vẫn lên Chrome?

Safari cần prefix -webkit-backdrop-filter bên cạnh backdrop-filter. Công cụ xuất cả hai. Hơn nữa Safari iOS đòi phần tử cha có background rõ ràng — kể cả lớp trong suốt 1px ở phía sau — nếu không GPU compositor bỏ qua hiệu ứng backdrop hoàn toàn.

Blur backdrop-filter ảnh hưởng hiệu năng nhiều không?

Khá nặng. backdrop-filter tốn GPU vì trình duyệt phải rasterize nền, blur rồi composite. Trên Android tầm thấp (Snapdragon 4xx, 2-3 năm) blur trên 16px tụt FPS từ 60 xuống 25-30. Production nên dùng 8-12px, tránh chồng nhiều lớp glass và giữ phần tử nhỏ (card, không phải overlay toàn trang).

Glassmorphism còn đẹp năm 2026 hay đã lỗi thời?

Glassmorphism đỉnh cao 2020-2022 (macOS Big Sur, Windows 11) và đã nhẹ dần. Xu hướng 2024-2026 nghiêng về glass tinh tế hơn cùng neumorphism quay lại và layout bento-grid. Glass vẫn hợp làm điểm nhấn premium ở hero, modal và thông báo nổi. Dùng làm điểm nhấn chứ không phải thẩm mỹ chính.

Làm sao fallback cho trình duyệt không hỗ trợ backdrop-filter?

Dùng CSS @supports: @supports not (backdrop-filter: blur(10px)) { .glass { background: rgba(255,255,255,0.85); } } để trình duyệt không hỗ trợ (Firefox cũ, IE) nhận nền đậm bán trong suốt giữ độ đọc. Luôn test ở Firefox chế độ riêng tư nơi backdrop-filter bị tắt mặc định cho tới Firefox 103.

Làm sao giữ chữ trên panel kính đạt chuẩn truy cập WCAG?

Kính bán trong suốt là nơi đa số bài kiểm tra tương phản thất bại. Tương phản chữ phải được đo với nền xấu nhất có thể nằm sau lớp blur, không phải với màu nền của chính lớp kính. Quy tắc thực tế:

1. Nhắm tối thiểu 4.5:1 (AA) cho chữ thường và 3:1 cho chữ lớn; mục tiêu 7:1 (AAA) cho UI quan trọng
2. Giảm độ trong suốt (tăng nền đậm) cho tới khi chữ vượt qua cả vùng sáng nhất và tối nhất của nền
3. Ưu tiên chữ tối trên kính sáng đặt trên nền sáng, và chữ trắng trên kính tối đặt trên nền tối
4. Thêm text-shadow nhẹ hoặc nền đậm hơn một chút phía sau chữ nếu nền rối
5. Kiểm tra lại tương phản khi dự phòng @supports đang bật, vì nó thay đổi nền hiệu dụng

Xác minh giá trị cuối bằng công cụ kiểm tra tương phản, đừng đoán bằng mắt.

Dùng class .glass được tạo cùng dự phòng @supports thế nào?

Bật "Quy tắc CSS đầy đủ + dự phòng" và công cụ bọc mọi khai báo trong selector .glass tái sử dụng được, rồi thêm khối @supports not (backdrop-filter: blur(1px)) đổi sang nền đậm hơn. Dán toàn bộ đoạn vào stylesheet rồi thêm class="glass" cho card, modal hay navbar bất kỳ — không cần tự viết feature query. Độ đục dự phòng được tính từ độ trong suốt bạn chọn, nên trình duyệt tắt backdrop-filter (Firefox chế độ riêng tư, engine cũ) vẫn hiển thị panel đậm dễ đọc khớp thiết kế. Tắt công tắc để chỉ sao chép các khai báo thô.

Tinh nang chinh

• Dieu chinh do mo (0-50px)
• Kiem soat do trong suot
• Tuy chon tang cuong do bao hoa
• Tuy chinh ban kinh bo goc
• Chon mau nen va vien
• Hieu ung bong tuy chon
• Nhieu mau nen co san
• 6 mau phong cach san sang su dung
• Xem truoc truc tiep
• Sao chép quy tắc CSS .glass đầy đủ sẵn dán
• Dự phòng @supports tích hợp giữ độ đọc
• Chuyển giữa quy tắc đầy đủ và khai báo thô
• Sao chep ma CSS
• Bao gom tien to nha cung cap
• Xu ly 100% phia may khach
• Ho tro che do toi
• Giao dien than thien voi di dong