Glassmorphism CSS Generator

Tạo hiệu ứng kính mờ (Glassmorphism) cho giao diện Web.

▶Về công cụ này

Tạo hiệu ứng kính mờ (Frosted Glass) hiện đại cho giao diện web. Tùy chỉnh độ mờ, độ trong suốt và lấy mã CSS.

Giao diện công cụ

Glassmorphism 
  
 
 
   
 
 

Glassmorphism là gì?

 
 
 
Hiệu ứng "Sự mờ ảo"
 

Glassmorphism là một xu hướng thiết kế UI mô phỏng vẻ ngoài của kính mờ (Frosted glass). Nó tạo ra cảm giác về chiều sâu và phân cấp bằng cách sử dụng các lớp nền trong suốt, độ mờ (Blur) và các đường viền nhẹ nhàng.

 
 
 
Thuộc tính backdrop-filter
 

Chìa khóa của Glassmorphism trong CSS chính là thuộc tính backdrop-filter: blur(). Nó cho phép làm mờ phần nội dung nằm phía sau một phần tử, tạo nên hiệu ứng kính chân thực mà không cần dùng đến các tệp hình ảnh phức tạp.

 
 
 
Lưu ý khi thiết kế
 

Đừng lạm dụng Glassmorphism quá mức. Hãy đảm bảo độ tương phản (Contrast) của văn bản trên nền kính vẫn đủ tốt để người dùng dễ dàng đọc được nội dung. Công cụ này giúp bạn điều chỉnh độ mờ và độ trong suốt để đạt được sự cân bằng hoàn hảo.

 
 
 
 
  
 
 
 
Cách sử dụng
 
     
  1. Chỉnh Blur/Opacity
  2. Xem trước
  3. Sao chép CSS
    4.  
 
 
 
Khi nào nên dùng
 
Khi cần tạo hiệu ứng kính mờ hiện đại (Glassmorphism) cho card, modal, hoặc navigation bar.
 
 
 
Ví dụ
 
Tạo card với backdrop-filter blur(10px), modal với hiệu ứng frosted glass.