Glassmorphism
Enhance your UI with this frosted glass effect.
Configuration
16px
0.25
180%
12px
CSS Code
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);Mẫu có sẵn
Glassmorphism là gì?
Glassmorphism là xu hướng thiết kế UI hiện đại tạo hiệu ứng kính mờ sương giá bằng các thuộc tính CSS như backdrop-filter. Phong cách này kết hợp độ trong suốt, độ mờ và viền tinh tế để tạo chiều sâu và phân cấp thị giác trong giao diện của bạn.
Lợi ích chính
- Hiện đại & Thanh lịch: Tạo vẻ ngoài cao cấp, đương đại nổi bật
- Chiều sâu thị giác: Thêm lớp và kích thước cho thiết kế phẳng
- Linh hoạt: Hoạt động tuyệt vời trên nền màu sắc, hình ảnh hoặc gradient
- Nhẹ nhàng: Giải pháp CSS thuần túy không cần hình ảnh
Trường hợp sử dụng phổ biến
- Thanh điều hướng và menu
- Hộp thoại modal và popup
- Thành phần card và widget
- Bảng điều khiển dashboard
- Phần hero và trang landing
Hỗ trợ trình duyệt
Thuộc tính backdrop-filter được hỗ trợ trên tất cả các trình duyệt hiện đại bao gồm Chrome, Safari, Edge và Firefox. Đối với các trình duyệt cũ hơn, hãy cân nhắc cung cấp nền màu đặc làm dự phòng.
Mẹo để có kết quả tốt nhất
- Sử dụng nền màu sắc hoặc có kết cấu để làm nổi bật hiệu ứng kính
- Giữ độ trong suốt từ 0.1-0.4 để đảm bảo khả năng đọc tối ưu
- Kết hợp với bóng đổ tinh tế để tăng chiều sâu
- Kiểm tra trên các màu nền khác nhau để đảm bảo độ tương phản