Generator Glassmorphism
Creează carduri UI din sticlă mată cu estompare de fundal, transparență și borduri, apoi copiază CSS-ul.
Card de sticlă
Sticlă mată plutind peste un fundal viu.
-
Generează atât backdrop-filter, cât și -webkit-backdrop-filter. Notă: backdrop-filter nu este acceptat în browserele mai vechi (de ex. Firefox sub 103); adaugă un fundal solid de rezervă pentru acelea.
Despre Generator Glassmorphism
Glassmorphism Generator construiește efectul de card cu sticlă mată: un panou translucid care estompează tot ce se află în spatele lui. Sliderele controlează blur-ul și saturația backdrop-filter, culoarea și transparența nuanței de sticlă, culoarea și opacitatea marginii, raza colțurilor și o umbră exterioară: fiecare modificare se randează live peste un fundal viu, ca să poți judeca efectul realist.
Patru presetări de calitate (subtle, frosted, vivid și dark glass) îți oferă combinații dovedite de la care poți porni. Presetarea dark arată cum aceeași rețetă se adaptează la interfețele întunecate, unde o margine luminoasă subtilă face cea mai mare parte din munca de separare a sticlei de fundal.
CSS-ul generat include atât backdrop-filter, cât și prefixul -webkit-backdrop-filter necesar în Safari. Reține avertismentul de compatibilitate: browserele mai vechi (de exemplu Firefox înainte de versiunea 103) nu suportă backdrop-filter, așa că livrează pentru ele un fundal solid de rezervă.
Cum să utilizați Generator Glassmorphism
- Pornește de la o presetare (subtle, frosted, vivid sau dark glass) sau de la valorile implicite.
- Ajustează blur-ul și saturația filtrului de fundal.
- Setează culoarea și transparența nuanței de sticlă.
- Ajustează culoarea marginii, opacitatea marginii, raza colțurilor și umbra exterioară.
- Copiază CSS-ul: include deja proprietatea cu prefixul -webkit- pentru Safari.