Tạo hiệu ứng kính mờ CSS với bản xem trước trực tiếp
Công cụ tạo glassmorphism này dựng sẵn hiệu ứng kính mờ một cách trực quan — bạn chỉ cần kéo các thanh trượt và xem tấm kính cập nhật ngay lập tức, rồi sao chép đoạn CSS sẵn dùng. Hiệu ứng dựa vào backdrop-filter: blur() để làm mờ mọi thứ nằm phía sau phần tử, kết hợp với nền bán trong suốt và một đường viền nhẹ để tạo nên vẻ kính đặc trưng.
Bạn kiểm soát mọi phần của hiệu ứng: cường độ làm mờ, màu nền và độ mờ đục, độ bão hòa, độ rộng và độ mờ đục viền, bo góc viền, cùng bóng đổ. Công cụ phù hợp cho thẻ và bảng, thanh điều hướng kính mờ, hộp thoại và lớp phủ, hay thanh bên và widget nổi trên những nền nhiều màu sắc.
Cách tạo hiệu ứng kính mờ
Bắt đầu từ một mẫu có sẵn
Nhấp vào một trong 6 mẫu — Trắng mờ, Kính tối, Phát sáng neon, Sương nhẹ, Pastel mơ màng hoặc Hổ phách ấm — để nạp một kiểu kính dựng sẵn làm nền tảng.
Tinh chỉnh các thông số
Chỉnh Độ mờ, Độ bão hòa, Màu, Độ mờ đục, độ rộng và độ mờ đục Viền, Bo góc viền và Đổ bóng. Mỗi thông số đều có thanh trượt để chỉnh nhanh và ô nhập số để đặt giá trị chính xác.
Xem trước trên mọi nền
Tấm kính cập nhật theo thời gian thực. Dùng bộ chuyển nền để thử trên Mảng gradient, Ảnh bạn tự tải lên, hoặc một Màu đơn.
Sao chép CSS
Nhấp Sao chép để đưa đoạn CSS đã tạo vào bộ nhớ tạm, rồi dán thẳng vào tệp stylesheet của dự án.
Tính năng
Xem trước trực tiếp
Mọi thay đổi đều hiện ngay trên tấm kính đặt trên các mảng gradient nhiều màu, để bạn đánh giá hiệu ứng theo thời gian thực.
Độ mờ chỉnh được
Đặt độ mờ của backdrop-filter bất kỳ từ 0 đến 30px để kiểm soát mức độ đậm của lớp kính mờ.
Màu & Độ mờ đục
Tô màu cho lớp kính bằng màu bất kỳ và chỉnh độ mờ đục nền từ 0 đến 100% để cân bằng giữa độ trong và độ tương phản.
Điều khiển độ bão hòa
Tăng độ rực rỡ của màu xuyên qua kính từ 100% đến 200% để làm nổi bật nền phía sau.
Viền & Bo góc
Tạo hình cho mép kính với độ rộng và độ mờ đục viền chỉnh được, cùng bo góc viền từ 0 đến 50px cho các góc bo tròn.
Chiều sâu bóng đổ
Thêm một lớp box-shadow mềm với độ mờ đục chỉnh được để tạo cảm giác nổi khối cho tấm kính.
6 mẫu có sẵn
Trắng mờ, Kính tối, Phát sáng neon, Sương nhẹ, Pastel mơ màng và Hổ phách ấm giúp bạn khởi đầu nhanh với các kiểu được chọn sẵn.
Nền linh hoạt
Xem trước trên các mảng gradient, một màu đơn tùy chỉnh, hoặc ảnh bạn tự tải lên để thấy lớp kính trên nội dung thực tế.
CSS sẵn dùng
Đoạn code tạo ra đã có tiền tố -webkit-backdrop-filter cho Safari, nên chạy được trên các trình duyệt hiện đại.
Sao chép một cú nhấp
Sao chép toàn bộ CSS vào bộ nhớ tạm chỉ với một nút bấm — không cần bôi đen hay gõ lại thủ công.
Câu hỏi thường gặp
Glassmorphism là gì?
Glassmorphism là một xu hướng thiết kế giao diện tạo ra hiệu ứng kính mờ bằng CSS. Nó kết hợp backdrop-filter: blur() để làm mờ nền phía sau phần tử, một màu nền bán trong suốt, một đường viền sáng nhẹ và một bóng đổ mềm để phần tử trông như một tấm kính.
Vì sao lớp kính trông như vô hình trên nền trắng?
Hiệu ứng dùng backdrop-filter: blur(), vốn làm mờ mọi thứ nằm phía sau phần tử. Trên một nền trắng trơn thì không có gì để làm mờ, nên lớp kính trông như vô hình. Hãy thử nó trên các gradient nhiều màu, ảnh hoặc màu đơn — nền Mảng gradient trong bản xem trước là lựa chọn lý tưởng cho việc này.
Nên dùng giá trị blur của backdrop-filter là bao nhiêu?
Độ mờ trong khoảng 8 đến 15px phù hợp với hầu hết thiết kế. Dưới khoảng 5px thì lớp kính quá nhạt, còn trên 20px thì kính bắt đầu trông đục. Giá trị tốt nhất tùy thuộc vào nền của bạn rối rắm đến đâu.
backdrop-filter có chạy trên Firefox và Safari không?
Có. backdrop-filter được hỗ trợ trên các phiên bản hiện tại của Chrome, Firefox, Safari và Edge. Đoạn CSS tạo ra cũng kèm tiền tố -webkit-backdrop-filter cho Safari cũ. Với các trình duyệt đời cũ, hãy thêm một nền bán trong suốt đơn sắc làm phương án dự phòng.
Độ mờ đục nền nào đẹp nhất cho hiệu ứng kính?
Độ mờ đục trong khoảng 15% đến 30% thường giữ cho lớp kính đủ trong để lộ nền mà vẫn đọc rõ. Nếu có chữ trên bảng, hãy nghiêng về mức cao hơn và kết hợp với ít nhất 10px độ mờ cùng chữ trắng có bóng đổ nhẹ.
Tôi có thể dùng nền ảnh tải lên cho sản phẩm thật không?
Phần tải ảnh chỉ để xem trước — nó giúp bạn thấy lớp kính trông thế nào trên nội dung thực tế. Khi triển khai thật, bạn sẽ đặt phần tử kính lên nội dung trang hoặc ảnh nền của riêng mình. Ảnh bạn tải lên đây vẫn nằm trong trình duyệt và không bao giờ được gửi đi đâu cả.
Glassmorphism có ảnh hưởng đến hiệu năng không?
backdrop-filter có thể ngốn nhiều GPU, nhất là ở giá trị độ mờ cao. Để hiển thị mượt, hãy dùng glassmorphism cho vài phần tử quan trọng như thẻ hoặc thanh điều hướng thay vì cho mọi thành phần, và giữ giá trị độ mờ ở mức hợp lý — thường là dưới 20px.
Chưa có bình luận nào. Hãy là người đầu tiên!