Glassmorphism Generator

Glassmorphism Generator - Hieu Ung Kinh Mo CSS

Tao hieu ung glassmorphism tuyet dep cho thiet ke web cua ban. Cong cu nay tao ma CSS cho xu huong giao dien kinh mo, bao gom backdrop blur, do trong suot va vien tinh te tao chieu sau va phan cap thi giac.

Glassmorphism la gi?

Glassmorphism la xu huong thiet ke UI hien dai tao hieu ung kinh mo. No su dung:

- Nen ban trong suot
- Bo loc backdrop blur
- Vien tinh te de dinh nghia canh
- Bong mem de tao chieu sau

Phong cach nay tro nen pho bien tu 2020-2021 va duoc Apple, Microsoft va nhieu ung dung web hien dai su dung.

Backdrop-filter hoat dong nhu the nao?

Thuoc tinh CSS backdrop-filter ap dung hieu ung cho vung phia sau phan tu:

blur(10px) - Tao hieu ung kinh mo
saturate(180%) - Tang cuong mau sac phia sau
brightness() - Dieu chinh do sang
contrast() - Dieu chinh do tuong phan

Quan trong: Phan tu phai co nen ban trong suot de hieu ung hien thi.

Trinh duyet nao ho tro glassmorphism?

Ho tro backdrop-filter:

Chrome 76+ (ho tro day du)
Firefox 103+ (ho tro day du)
Safari 9+ (can tien to -webkit-)
Edge 79+ (ho tro day du)
Opera 63+ (ho tro day du)

Luon them tien to -webkit- cho Safari.

Thuc hanh tot nhat cho thiet ke glassmorphism

Meo su dung glassmorphism hieu qua:

1. Su dung tren nen nhieu mau - Hieu ung hoat dong tot nhat tren gradient hoac hinh anh
2. Giu blur vua phai (8-20px)
3. Su dung do trong suot tinh te (15-30%)
4. Them vien mong - Giup xac dinh canh
5. Xem xet do tuong phan - Dam bao van ban de doc
6. Su dung tiet kiem - Qua nhieu phan tu kinh co the gay roi

Tinh nang chinh

• Dieu chinh do mo (0-50px)
• Kiem soat do trong suot
• Tuy chon tang cuong do bao hoa
• Tuy chinh ban kinh bo goc
• Chon mau nen va vien
• Hieu ung bong tuy chon
• Nhieu mau nen co san
• 6 mau phong cach san sang su dung
• Xem truoc truc tiep
• Sao chep ma CSS
• Bao gom tien to nha cung cap
• Xu ly 100% phia may khach
• Ho tro che do toi
• Giao dien than thien voi di dong