Trình tạo Glassmorphism
Tạo thẻ giao diện kính mờ với hiệu ứng làm mờ phông nền, độ trong suốt và viền, rồi sao chép CSS.
Thẻ kính
Kính mờ trôi nổi trên một phông nền sống động.
—
Xuất ra cả backdrop-filter và -webkit-backdrop-filter. Lưu ý: backdrop-filter không được hỗ trợ trên các trình duyệt cũ (ví dụ Firefox dưới 103); hãy thêm nền dự phòng đặc cho các trình duyệt đó.
Giới thiệu về Trình tạo Glassmorphism
Glassmorphism Generator dựng hiệu ứng thẻ kính mờ sương giá: một tấm bán trong suốt làm mờ bất cứ thứ gì ở phía sau nó. Các thanh trượt điều khiển độ mờ (blur) và độ bão hòa (saturation) của backdrop-filter, màu và độ trong suốt của lớp kính, màu và độ mờ viền, bán kính góc và bóng đổ bên ngoài — mỗi thay đổi đều được hiển thị sống động trên một nền rực rỡ để bạn đánh giá hiệu ứng một cách chân thực.
Bốn preset chất lượng — subtle, frosted, vivid và dark glass — cung cấp những tổ hợp đã được kiểm chứng để bạn bắt đầu từ đó. Preset dark cho thấy cùng một công thức được thích nghi ra sao với giao diện tối, nơi một viền sáng mờ nhạt đảm nhận phần lớn việc tách lớp kính khỏi nền.
CSS được sinh ra bao gồm cả backdrop-filter lẫn tiền tố -webkit-backdrop-filter mà Safari yêu cầu. Lưu ý điểm cần cân nhắc về tương thích: các trình duyệt cũ hơn (ví dụ Firefox trước phiên bản 103) không hỗ trợ backdrop-filter, nên hãy chuẩn bị sẵn một màu nền dự phòng đặc cho chúng.
Cách sử dụng Trình tạo Glassmorphism
- Bắt đầu từ một preset — subtle, frosted, vivid hoặc dark glass — hoặc từ giá trị mặc định.
- Điều chỉnh độ mờ và độ bão hòa của backdrop filter.
- Đặt màu và độ trong suốt của lớp kính.
- Tinh chỉnh màu viền, độ mờ viền, bán kính góc và bóng đổ viền ngoài.
- Sao chép CSS — nó đã bao gồm sẵn thuộc tính có tiền tố -webkit- cho Safari.