Tạo Glassmorphism

Tạo hiệu ứng glassmorphism CSS với xem trước.

Glassmorphism

Tác dụng thủy tinh đông lạnh với mờ và minh bạch cho giao diện hiện đại.

Mờ10px
Nhìn trộm25%
Biên giới1px
Trâm giới16px
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.4);

Trình tạo hiệu ứng glassmorphism CSS trực tuyến

Glassmorphism (hay hình thái kính) là xu hướng thiết kế giao diện mô phỏng hiệu ứng kính mờ trong suốt. Đặc trưng bởi nền bán trong suốt với hiệu ứng mờ (blur) cho phép thấy một phần nội dung phía sau phần tử, tạo cảm giác chiều sâu và lớp. Phong cách này được Apple phổ biến trong macOS Big Sur và iOS, và từ đó trở thành một trong những xu hướng thiết kế UI phổ biến nhất.

Trình tạo glassmorphism cho phép điều chỉnh trực quan tất cả tham số: mức mờ (backdrop-filter: blur), độ trong suốt nền (rgba alpha), độ dày và trong suốt viền, và bán kính góc. Xem trước cập nhật thời gian thực hiển thị hiệu ứng trên nền nhiều màu với hình trang trí, cho thấy chính xác hiệu ứng trong ngữ cảnh thực.

Mã CSS được tạo bao gồm thuộc tính tiêu chuẩn backdrop-filter và tiền tố -webkit- cho tương thích Safari. Glassmorphism hoạt động trên mọi trình duyệt hiện đại (Chrome, Firefox, Safari, Edge) và lý tưởng cho thẻ, modal, thanh điều hướng, menu nổi và bất kỳ phần tử nào chồng lên nội dung trực quan như ảnh hoặc gradient.

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

Có tương thích với tất cả trình duyệt không?

Thuộc tính backdrop-filter tương thích với Chrome, Safari, Edge và Firefox (từ phiên bản 103). Safari cần tiền tố -webkit-, trình tạo tự động bao gồm. Internet Explorer không hỗ trợ.

Glassmorphism có ảnh hưởng đến hiệu suất không?

Hiệu ứng blur có thể tiêu tốn tài nguyên GPU, đặc biệt với giá trị cao trên thiết bị di động. Để hiệu suất tốt hơn, dùng giá trị blur vừa phải (4-15px) và áp dụng hiệu ứng cho ít phần tử cùng lúc.

Có cần nền đặc biệt để hoạt động không?

Có, glassmorphism cần nội dung phía sau phần tử (hình ảnh, gradient, màu) để hiệu ứng mờ hiển thị. Trên nền trắng đặc, hiệu ứng gần như không nhìn thấy.