Trình tạo Glassmorphism CSS

Trình tạo Glassmorphism CSS là gì?

Trình tạo Glassmorphism CSS là một trình chỉnh sửa trực quan miễn phí cho phong cách giao diện kính mờ (glassmorphism), dành cho lập trình viên front-end và nhà thiết kế sản phẩm. Điều chỉnh mức độ làm mờ, độ trong suốt bề mặt, độ bão hòa màu, độ dày viền, bán kính bo góc và độ mạnh của bóng đổ bằng ô nhập số và thanh trượt, rồi chọn một màu phủ bằng mẫu màu. Khung xem trước hiển thị tấm kính trên nền dải màu sống động theo thời gian thực, và toàn bộ CSS — dùng backdrop-filter, nền bán trong suốt, viền tinh tế và box-shadow — được tạo ra để bạn sao chép. Dùng nó để tạo thẻ, thanh điều hướng, hộp thoại và lớp phủ kiểu kính mà không phải tinh chỉnh alpha rgba thủ công hay nhớ tiền tố -webkit-backdrop-filter.

Cách sử dụng Trình tạo Glassmorphism CSS

1. Đặt Làm mờ (theo px) để kiểm soát mức độ làm mờ vùng phía sau tấm.
2. Giảm Độ trong suốt để kính trong hơn, hoặc tăng lên để có bề mặt đặc hơn.
3. Tăng Độ bão hòa lên trên 100% để các màu nền nổi bật qua lớp kính.
4. Chọn một màu phủ bằng mẫu màu và điều chỉnh độ rộng Viền, Bán kính và Bóng đổ để hoàn thiện diện mạo.
5. Quan sát bản xem trước cập nhật trên nền theo thời gian thực khi bạn thay đổi từng giá trị.
6. Sao chép CSS được tạo vào bảng định kiểu của bạn — nó đã bao gồm bản dự phòng -webkit-backdrop-filter.

Ví dụ

làm mờ 12, độ trong suốt 25%, độ bão hòa 120%, bán kính 16, viền 1, bóng đổ 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

làm mờ 8, độ trong suốt 60%, độ bão hòa 100%, bán kính 0, viền 1, bóng đổ 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

màu phủ #0f172a, làm mờ 20, độ trong suốt 30%, độ bão hòa 140%, bán kính 24, bóng đổ 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

Câu hỏi thường gặp

backdrop-filter làm gì?

backdrop-filter áp dụng các hiệu ứng đồ họa — ở đây là làm mờ và độ bão hòa — lên bất cứ thứ gì nằm phía sau phần tử, và đó chính là thứ tạo nên diện mạo kính mờ. Trình tạo xuất cả backdrop-filter lẫn tiền tố -webkit-backdrop-filter để hoạt động trên nhiều trình duyệt, cùng với nền bán trong suốt, viền và bóng đổ.

Tại sao có điều khiển độ trong suốt?

Hiệu ứng kính cần một nền trong suốt một phần để nền đã làm mờ hiện ra. Thanh trượt Độ trong suốt đặt giá trị alpha của màu nền tấm (rgba): giá trị thấp hơn thì trong suốt hơn, giá trị cao hơn thì đục và đặc hơn.

Tôi có thể dùng kính màu hoặc kính tối không?

Có. Chọn bất kỳ màu phủ nào bằng mẫu màu — công cụ pha trộn nó vào nền rgba, nên bạn có thể tạo kính ấm, lạnh hoặc tối. Kết hợp màu phủ tối với độ trong suốt cao hơn để có lớp phủ trầm lắng, hoặc giữ màu trắng cho tấm kính mờ cổ điển.

Nó có hoạt động trên mọi trình duyệt không?

Hầu hết các trình duyệt hiện đại đều hỗ trợ backdrop-filter. CSS được tạo bao gồm tiền tố -webkit-backdrop-filter cho Safari và Chromium cũ, nhưng các trình duyệt rất cũ sẽ bỏ qua nó và chỉ hiển thị nền bán trong suốt mà không có hiệu ứng làm mờ.

Dữ liệu của tôi có được tải lên đâu đó không?

Không. Trình tạo chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript — màu sắc và giá trị của bạn không bao giờ được gửi đến máy chủ, nên nó hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang đã tải xong.