Cách dùng Trình tạo Glassmorphism
- Điều chỉnh độ mờ, độ bão hòa và độ mờ nền cho đến khi thẻ trông ổn trên nền mẫu.
- Đổi nền xem trước để kiểm tra khả năng đọc trên ảnh phức tạp hoặc giao diện tối.
- Sao chép CSS (có tiền tố và phương án dự phòng) hoặc các class Tailwind arbitrary-value.
- Lưu ý: hiệu ứng chỉ hiện khi có thứ gì đó nhiều màu sắc nằm phía sau phần tử.
Glassmorphism là gì?
Glassmorphism là phong cách kính mờ phổ biến trên macOS và Windows 11: một bảng bán trong suốt làm mờ mọi thứ nằm phía sau, thường kèm viền sáng mỏng và bóng đổ nhẹ. Trong CSS, hiệu ứng này được tạo bằng backdrop-filter: blur() cùng màu nền trong mờ.
Giải thích CSS
background: rgba(255,255,255,.18)— lớp phủ màu. Nếu quá đục, hiệu ứng mờ sẽ biến mất; nếu quá trong, chữ sẽ khó đọc.backdrop-filter: blur(12px) saturate(160%)— làm mờ và tăng nhẹ độ rực của màu phía sau phần tử, giúp kính không bị xám xịt.-webkit-backdrop-filter— Safari vẫn cần tiền tố để hỗ trợ ổn định, và đây là dòng mà lập trình viên hay quên nhất.- Viền trắng bán trong suốt 1px giúp xác định rõ mép của tấm kính.
Hiệu năng và khả năng truy cập
Hiệu ứng làm mờ nền rất tốn tài nguyên GPU: hạn chế các vùng mờ lớn có hoạt ảnh hoặc nằm trên video, và thử cuộn trang trên điện thoại cấu hình thấp. Luôn kiểm tra độ tương phản chữ trên phần nền khó đọc nhất bằng Contrast Checker, và giữ quy tắc dự phòng để các trình duyệt không hỗ trợ nhận được nền đục hơn, dễ đọc hơn.
Trong Webflow
Bảng Style của Webflow có mục Backdrop filters trong phần Effects. Bạn thêm Blur (và Saturate) tại đó, đặt màu nền với kênh alpha, và Webflow sẽ xuất ra CSS cần thiết.
Cũng được tìm dưới tên: css glassmorphism, hiệu ứng kính mờ css, backdrop-filter là gì, hiệu ứng frosted glass, làm mờ nền css, glass effect css, -webkit-backdrop-filter, tạo glassmorphism online.
Các công cụ dùng kèm tốt với Trình tạo Glassmorphism
- Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
- Tạo arbitrary value Tailwind — Dán CSS và nhận ngay cú pháp ngoặc vuông của Tailwind đúng ngay lần đầu.
- Chuyển HEX sang RGBA — Dán mã HEX, kéo thanh độ mờ và sao chép đúng đoạn CSS bạn cần: rgba() truyền thống, rgb( / alpha) hiện đại hoặc HEX 8 số.
Câu hỏi thường gặp
Vì sao backdrop-filter không hoạt động?
-webkit- cho Safari.backdrop-filter có được hỗ trợ trên mọi trình duyệt không?
Sự khác nhau giữa filter: blur và backdrop-filter: blur là gì?
filter làm mờ chính phần tử, bao gồm cả chữ bên trong. backdrop-filter chỉ làm mờ phần nằm phía sau phần tử, nên nội dung vẫn sắc nét.