Trình Tạo Glassmorphism CSS

Công Cụ Này Là Gì?

Glassmorphism là một phong cách giao diện trong đó một phần tử trông như kính mờ: nền bán trong suốt cho phép màu sắc phía sau hiện lên, trong khi backdrop-filter: blur() làm mờ nền đó để nó được cảm nhận như kính chứ không phải một tấm trong suốt phẳng. Một viền mỏng bán trong suốt cùng góc bo tròn thường hoàn thiện vẻ ngoài này.

Công cụ này cho phép bạn xây dựng hiệu ứng đó một cách trực quan. Khung xem trước nằm trên nền gradient chuyển động chính vì để độ mờ được nhìn thấy rõ — glassmorphism chỉ hiển thị đúng khi có màu sắc hoặc chi tiết phía sau, không phải trên một trang trắng phẳng. Điều chỉnh độ trong suốt của màu nền, cường độ mờ, độ trong suốt của viền và bán kính góc, sau đó sao chép mã CSS được tạo ra.

Nguồn: Filter Effects Module Level 1, W3C — định nghĩa backdrop-filter, thuộc tính mà hiệu ứng này dựa trên đó.

Tại Sao Nên Dùng?

• Xem trước trực tiếp trên nền động đầy màu sắc, để bạn thực sự thấy được hiệu ứng kính mờ thay vì đoán mò giá trị blur trên nền trống.
• Kiểm soát đầy đủ độ trong suốt nền, cường độ mờ nền, độ trong suốt viền và border-radius tại một nơi.
• Tự động xuất cả backdrop-filter và tiền tố -webkit-backdrop-filter, để bạn không quên hỗ trợ Safari.
• Chạy hoàn toàn trong trình duyệt của bạn — không có gì bạn cấu hình được tải lên bất cứ đâu.
• Miễn phí, không cần đăng ký, hoạt động tốt trên điện thoại.

Cách Sử Dụng

1. Chọn màu nền và điều chỉnh độ trong suốt của nó — độ trong suốt thấp (10–25%) trông như kính; độ trong suốt cao trông giống một tấm màu đặc hơn.
2. Tăng cường độ mờ để làm mờ những gì phía sau phần tử — đây chính là thứ tạo ra vẻ ngoài kính mờ, khác với bản thân độ trong suốt.
3. Điều chỉnh độ trong suốt của viền để thêm một cạnh sáng tinh tế, giúp thẻ kính được nhận diện như một bề mặt riêng biệt thay vì hòa lẫn vào nền.
4. Đặt border-radius để bo tròn góc — thẻ glassmorphism hầu như luôn được bo tròn, hiếm khi có góc sắc.
5. Sao chép mã CSS được tạo ra và dán vào stylesheet của bạn. Hãy nhớ rằng phần tử cần có thứ gì đó có màu sắc hoặc kết cấu ở phía sau — glassmorphism sẽ vô hình trên nền phẳng một màu.

Ví dụ

Đầu vào

Nền: trắng với độ trong suốt 20% · Độ mờ: 10px · Độ trong suốt viền: 30% · Bán kính: 16px

Đầu ra

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Kiểu thẻ kính mờ cổ điển thường dùng trong bảng đăng nhập, thanh điều hướng và widget bảng điều khiển trên nền đầy màu sắc hoặc hình ảnh.

Hỗ trợ Safari và trình duyệt

backdrop-filter được hỗ trợ trên các phiên bản Chrome, Firefox, Edge và Safari hiện tại, nhưng theo lịch sử Safari yêu cầu tiền tố -webkit-backdrop-filter bên cạnh thuộc tính không tiền tố để hiển thị độ mờ — nếu thiếu, các phiên bản Safari cũ sẽ âm thầm bỏ qua độ mờ và chỉ hiển thị nền trong suốt phẳng. Vì lý do đó, công cụ này luôn xuất cả hai khai báo.

Xem tài liệu backdrop-filter của MDN để biết chi tiết về khả năng tương thích trình duyệt hiện tại: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Tại sao glassmorphism cần thứ gì đó phía sau

backdrop-filter chỉ làm mờ những gì nằm về mặt hình ảnh phía sau phần tử — một hình nền, một gradient, một phần tử màu khác, hoặc nội dung đang cuộn bên dưới. Trên nền trắng phẳng hoặc một màu, không có gì để làm mờ, nên hiệu ứng trở nên vô hình và phần tử chỉ trông như một hộp bo tròn nhuốm màu nhẹ. Luôn đặt các phần tử glassmorphism trên nền gradient, ảnh, hoặc nền có nhiều chi tiết khác để hiệu ứng được nhìn thấy rõ.

Kết hợp với các hiệu ứng CSS khác

Thẻ glassmorphism thường được kết hợp với một box-shadow tinh tế bên dưới để tăng thêm chiều sâu. Tạo mã CSS kính mờ ở đây, sau đó thêm một bóng mềm bằng Trình Tạo Box Shadow và áp dụng cả hai khai báo lên cùng một phần tử.

→ Trình Tạo Box Shadow · Trình Tạo Border Radius

Câu Hỏi Thường Gặp