Glassmorphism Generator
Cong cu tao hieu ung kinh mo CSS mien phi. Tao hieu ung frosted glass dep voi blur, do trong suot va bong do. Xem truoc truc tiep, xuat ma CSS. Xu huong thiet ke hien dai.
Glassmorphism
Hieu ung kinh hien dai cho thiet ke giao dien dep
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