Generator Glassmorphism
Generatorul Glassmorphism creează efectul de sticlă mată cu CSS backdrop-filter și te lasă să ajustezi blur-ul, opacitatea fundalului, saturația, opacitatea bordurii, raza și culoarea nuanței, cu previzualizare live.
Despre acest instrument
Generatorul Glassmorphism creează efectul de sticlă mată cu CSS backdrop-filter și te lasă să ajustezi blur-ul, opacitatea fundalului, saturația, opacitatea bordurii, raza și culoarea nuanței, cu previzualizare live.
Cum se folosește
- Alege culoarea nuanței sticlei.
- Ajustează blur-ul, opacitatea și saturația.
- Setează opacitatea bordurii și border-radius.
- Apasă Copy CSS.
Bine de știut
- Efectul folosește backdrop-filter: blur() saturate(), care estompează tot ce se află în spatele elementului.
- Este nevoie de un fundal semitransparent (rgba), altfel blur-ul nu se vede.
- CSS-ul generat include prefixul -webkit-backdrop-filter pentru Safari.
- Efectul de sticlă funcționează cel mai bine peste fundaluri colorate sau imagini; pe culori uniforme blur-ul nu este vizibil.
- Urmărește contrastul textului — panourile translucide pot coborî sub contrastul WCAG peste fundaluri încărcate.
Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.
Întrebări frecvente
Cum fac un efect de sticlă în CSS?
Dă elementului un fundal semitransparent, de exemplu rgba(255,255,255,0.15), și backdrop-filter: blur(12px); acest instrument scrie regula completă.
De ce nu funcționează backdrop-filter?
Elementul are nevoie de un fundal transparent sau semitransparent și trebuie să existe ceva în spatele lui de estompat. Safari are nevoie și de prefixul -webkit-.
Glassmorphism este accesibil?
Poate fi, dacă textul păstrează un contrast suficient. Testează culorile textului peste cea mai încărcată parte a fundalului.
backdrop-filter afectează performanța?
Estomparea solicită intens GPU-ul, așa că evită să o aplici pe zone foarte mari sau pe multe elemente simultan, mai ales pe telefoanele slabe.