Thư viện thuật ngữ / UI/UX

Glassmorphism là gì?

Còn gọi: hiệu ứng kính mờ, frosted glass

Glassmorphism là phong cách giao diện dùng các tấm nền trong mờ như kính mờ, làm nhoè phần phía sau, kèm viền sáng mảnh và bóng nhẹ, đặt trên nền nhiều màu.

Ảnh minh hoạ Glassmorphism: một thẻ giao diện kính mờ trên nền gradient nhiều màu, kèm bản phóng to cho thấy lớp làm mờ và viền sáng
Một thẻ giao diện kính mờ trên nền gradient nhiều màu, kèm bản phóng to cho thấy lớp làm mờ và viền sáng

Hiểu kỹ hơn

Hiệu ứng này dựa trên làm mờ nền phía sau (background blur), xuất hiện nhiều trong macOS, iOS và Windows. Glassmorphism tạo chiều sâu và cảm giác hiện đại mà vẫn nhẹ nhàng. Khi dùng, cần đảm bảo chữ trên tấm kính đủ tương phản với mọi phần nền phía sau, vì nền thay đổi có thể làm chữ khó đọc. Trên web, hiệu ứng này dùng thuộc tính CSS backdrop-filter và có thể nặng với máy yếu.

Glassmorphism học viên ColorME làm