Trình Tạo Glassmorphism

backdrop-filter: blur() là thuộc tính CSS tạo nên giao diện kính mờ — một bảng trong mờ làm mờ những gì chuyển động phía sau thay vì chỉ làm phai một màu phẳng. Vấn đề là chất lượng mờ gần như không thể đánh giá trên một mẫu tĩnh; nó chỉ thuyết phục khi có thứ gì đó thực sự chuyển động bên dưới, như trên một trang thực có nội dung, video hoặc hero động. Trình tạo này đặt thẻ xem trước trên một nền động thực sự thay vì nền tĩnh, vì vậy những gì bạn thấy khi kéo thanh trượt chính là trải nghiệm thực tế của khách truy cập.

Nền là một hoạt ảnh CSS thực: một linear-gradient lớn được vẽ ở kích thước 400% phần tử, với @keyframes dịch chuyển background-position qua lại theo vòng lặp — không dùng vòng lặp hoạt ảnh JavaScript, không canvas, chỉ là kỹ thuật background-position liên tục giống như trong các hero section thực tế. Độ mờ, màu và độ mờ của sắc độ, màu/độ mờ/độ dày của viền nổi bật, bo góc và độ mềm của bóng đổ đều điều khiển kiểu dáng trực tiếp của thẻ nổi, và hộp CSS có thể sao chép phản ánh chính xác các giá trị đó.

Không phải trình duyệt nào cũng hỗ trợ backdrop-filter, vì vậy trình tạo cũng xuất ra một khối @supports not (backdrop-filter: blur(1px)) thực — không chỉ là một cử chỉ tượng trưng, mà là một quy tắc dự phòng với màu nền riêng được tính toán từ độ mờ sắc độ thực tế của bạn. Vì trong mờ mà không có mờ trông kém hơn hẳn (những gì đằng sau lộ ra mà không bị mờ), phương án dự phòng tự động tăng kênh alpha cao hơn độ mờ sắc độ bạn đã chọn, và một chú thích trong CSS được tạo ra giải thích chính xác lý do cũng như mức tăng.

Mọi thứ tính toán và hiển thị ngay trong trình duyệt của bạn: không tải lên, không tài khoản, không truy vấn máy chủ. Sao chép CSS khi thẻ trông ưng ý, áp dụng cho bất kỳ phần tử nào bạn muốn đặt trên ảnh, video hoặc nền chuyển màu, và giữ lại khối @supports để các trình duyệt cũ vẫn nhận được một thẻ dễ đọc, đục hơn thay vì gần như không nhìn thấy.