Skip to main content

Tạo CSS Glassmorphism

Tạo hiệu ứng UI kính mờ với xem trước trực tiếp và xuất CSS. Tinh chỉnh cài đặt độ trong suốt, độ mờ, viền và bóng đổ.

Xem trước

Glassmorphism

Xem trước

Điều khiển

10px
0.25
180%
0.18
16px
#ffffff

Mã CSS

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
Chia sẻ công cụ
📖

Cách sử dụng

Step 1

Điều chỉnh tham số

Điều chỉnh tham số

Điều chỉnh độ mờ đục, độ mờ và viền

Step 2

Xem trước

Xem trước

Xem hiệu ứng kính theo thời gian thực

Step 3

Sao chép

Sao chép

Sao chép mã CSS để sử dụng

Tính năng

Điều chỉnh độ mờ

Điều chỉnh lượng mờ backdrop-filter

Tùy chỉnh nền

Tùy chỉnh ảnh nền hoặc màu nền

Viền & Bóng đổ

Cấu hình viền và bóng đổ theo phong cách kính

FAQ

Xu hướng thiết kế UI với hiệu ứng trong suốt như kính mờ.