Trình tạo Glassmorphism
Công cụ tạo Glassmorphism tạo hiệu ứng kính mờ bằng CSS backdrop-filter, cho phép bạn chỉnh độ mờ, độ trong suốt của nền, độ bão hòa, độ trong suốt của viền, bo góc và màu phủ, kèm xem trước trực tiếp.
Về công cụ này
Công cụ tạo Glassmorphism tạo hiệu ứng kính mờ bằng CSS backdrop-filter, cho phép bạn chỉnh độ mờ, độ trong suốt của nền, độ bão hòa, độ trong suốt của viền, bo góc và màu phủ, kèm xem trước trực tiếp.
Cách sử dụng
- Chọn màu phủ cho lớp kính.
- Điều chỉnh độ mờ, độ trong suốt và độ bão hòa.
- Đặt độ trong suốt của viền và border radius.
- Bấm Copy CSS.
Điều nên biết
- Hiệu ứng dùng backdrop-filter: blur() saturate(), làm mờ mọi thứ phía sau phần tử.
- Cần có nền bán trong suốt (rgba), nếu không hiệu ứng mờ sẽ bị che mất.
- CSS được tạo có kèm tiền tố -webkit-backdrop-filter cho Safari.
- Hiệu ứng kính đẹp nhất trên nền nhiều màu hoặc nền ảnh; trên màu phẳng sẽ không thấy độ mờ.
- Hãy chú ý độ tương phản của chữ — bảng trong mờ có thể không đạt mức tương phản WCAG trên nền rối mắt.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Làm sao để tạo hiệu ứng kính bằng CSS?
Cho phần tử một nền bán trong suốt, ví dụ rgba(255,255,255,0.15), và backdrop-filter: blur(12px); công cụ này sẽ viết đầy đủ quy tắc cho bạn.
Vì sao backdrop-filter không hoạt động?
Phần tử cần có nền trong suốt hoặc bán trong suốt, và phải có thứ gì đó phía sau để làm mờ. Safari cũng cần tiền tố -webkit-.
Glassmorphism có thân thiện với khả năng tiếp cận không?
Có thể, nếu chữ vẫn giữ đủ độ tương phản. Hãy kiểm tra màu chữ trên phần rối mắt nhất của nền.
backdrop-filter có ảnh hưởng hiệu năng không?
Làm mờ tốn nhiều tài nguyên GPU, nên tránh áp dụng cho vùng quá lớn hoặc nhiều phần tử cùng lúc, nhất là trên điện thoại cấu hình thấp.