Liquid Glass cho web: hiệu ứng kính khúc xạ thật bằng WebGL
Tóm tắt
Glassmorphism bằng CSS thuần chỉ làm mờ nền và trông phẳng. Các thư viện Liquid Glass dùng WebGL shader để mô phỏng khúc xạ và làm mờ theo thời gian thực, áp được lên card, nút tròn, dạng viên thuốc mà không cần tự viết shader.
Khác gì CSS thuần?
| CSS backdrop-filter | Liquid Glass (WebGL) | |
|---|---|---|
| Hiệu ứng | Làm mờ nền, không bóp méo | Khúc xạ + làm mờ, nền bị bẻ cong như kính thật |
| Hình khối | Theo border-radius | Card, hình tròn, pill… có mask tuỳ chỉnh |
| Chi phí | Rất nhẹ | Tốn GPU hơn |
| Độ phức tạp | Vài dòng CSS | Vài dòng JS, thư viện lo phần shader |
Áp dụng thế nào?
- Dùng có chọn lọc: cho thành phần nổi bật (thanh điều hướng, card hero), không phủ cả trang.
- Fallback: giữ phiên bản
backdrop-filtercho thiết bị yếu hoặc không hỗ trợ WebGL. - Độ tương phản: chữ trên nền kính dễ mất tương phản — kiểm tra tỉ lệ tối thiểu 4.5:1.
Tham khảo: liquid-glass-js (npm) · liquidGL (GitHub)