Creează efecte de sticlă mată. Reglează blur-ul, transparența și bordurile, apoi copiază CSS-ul în proiect. 100% gratuit. Fără cont.
Efectul la modă de sticlă mată, pentru design web modern.
Construit de la zero pentru confidențialitate strictă, execuție instant și zero fricțiune. Fără abonamente, paywall-uri sau conturi.
Reglează blur-ul, opacitatea și saturația în timp real, pe un fundal viu, ca să vezi imediat efectul de sticlă.
Generează automat backdrop-filter cu prefix webkit, compatibil cu Safari, Chrome și Firefox.
Generează clase CSS standard sau traduce designul în clase utilitare Tailwind.
Execuția 100% pe client îți permite să tragi sliderele și să vezi CSS-ul actualizat fără lag.
Compară motorul nostru local WebAssembly cu uneltele cloud vechi.
| Funcție | Utiliome (browser local) | Convertoare cloud clasice |
|---|---|---|
| Previzualizare live | Pânză interactivă în timp real | Generatoare de cod statice |
| Ieșire de cod | CSS simplu și clase utilitare Tailwind | Doar CSS |
| Compatibilitate | Adaugă automat -webkit-backdrop-filter | Prefixare manuală |
| Cost | Gratuit pentru totdeauna, fără reclame | Paywall pentru machete premium |
Nu trebuie să instalezi niciun program. Totul rulează direct în browser.
Folosește sliderul ca să stabilești cât de mat este fundalul din spatele cardului de sticlă.
Modifică canalul alfa ca sticla să aibă o tentă închisă discretă sau un alb mat luminos.
Apasă export ca să copiezi fragmentul CSS gata de producție în clipboard.
Răspuns rapid: Glassmorphism este un trend de interfață cu fundaluri semitransparente, blur puternic (sticlă mată), umbre fine pe mai multe straturi și borduri subțiri. Creează adâncime și ierarhie.
Pornit puternic din macOS Big Sur, iOS și Windows 11 Fluent Design, glassmorphism a devenit standardul de facto pentru aplicațiile web premium.
Filosofia se sprijină pe axa Z. Stratul de deasupra este semitransparent și estompează straturile vii de dedesubt, așa că ierarhia apare fără umbre dure. Utilizatorul păstrează contextul a ceea ce se întâmplă „în spatele” ferestrei active.
Răspuns rapid: Proprietatea backdrop-filter aplică efecte grafice, cum este blur-ul, zonei din spatele unui element. Spre deosebire de filter, care estompează elementul însuși, backdrop-filter afectează doar ce se vede prin fundalul transparent.
Pentru glassmorphism, dezvoltatorii se bazează pe regula CSS backdrop-filter. Cu un fundal semitransparent (de exemplu background: rgba(255, 255, 255, 0.2);) și backdrop-filter: blur(10px);, motorul ia pixelii din spatele elementului, îi estompează și îi pictează în interior.
Pentru că browserul recalculează pixelii la derulare, proprietatea este accelerată hardware. Generatorul Utiliome calculează acești parametri instant, ca să vezi impactul în timp real.
Răspuns rapid: Tailwind are utilitare pentru sticlă. Combini backdrop-blur-md, bg-white/30 și un border-white/20 subțire, fără CSS personalizat.
CSS-ul personalizat este bun pentru învățare, dar mulți dezvoltatori preferă framework-uri utilitare precum Tailwind.
Un card de sticlă în Tailwind are trei straturi:
backdrop-blur-md sau backdrop-blur-lg matează fundalul.bg-white/20 (mod luminos) sau bg-slate-900/40 (mod întunecat) dă prezență sticlei.border border-white/20.Generatorul Utiliome comută între CSS standard și un șir de clase Tailwind formatat corect.
Răspuns rapid: Safari a cerut istoric prefixul -webkit- pentru backdrop-filter. Fără el, efectul cade pe iOS și macOS și rămâne o cutie transparentă plată.
Capcana frecventă este hardware-ul Apple. Chrome și Firefox acceptă backdrop-filter nativ, dar Safari (mai ales versiunile iOS mai vechi) cere prefixul de furnizor.
Fără -webkit-backdrop-filter: blur(10px);, utilizatorii Apple văd un div transparent, iar textul devine ilizibil pe fundal.
Generatorul CSS Utiliome injectează automat prefixele WebKit, ca designul să arate la fel pe sistemele majore.
Răspuns rapid: Glassmorphism pică des la accesibilitate: textul pus peste un fundal estompat și viu poate rata raporturile WCAG. Culoarea textului trebuie să fie suficient de închisă sau de deschisă față de tenta medie a sticlei.
Critica cea mai frecventă este accesibilitatea slabă. Dacă imaginea din spate trece de la albastru închis la galben intens, textul alb poate dispărea.
Remediul este o tentă puternică (opacitate). Pentru text alb, un fundal de tip rgba(0, 0, 0, 0.6) garantează un contrast de minimum 4,5:1, indiferent de imaginea din spate.
Răspuns rapid: O placă de sticlă mată lipită de suprafață nu arată a sticlă. Ridic-o cu o umbră largă și discretă, de exemplu box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1).
Creierul are nevoie de indicii de lumină ca să citească adâncimea. Doar blur-ul lasă interfața plată.
Ca sticla să iasă în față, o ridici pe axa Z. Generatorul îți permite să reglezi un box-shadow discret. Cu opacitatea umbrei foarte mică (în jur de 10%) și raza de blur mare (32px), apare o ocluzie ambientală moale, care separă sticla de fundalul viu.
Tot ce trebuie să știi ca să folosești gratuit Generator CSS glassmorphism de la Utiliome.
Safari cere prefixul „-webkit-backdrop-filter”. Utiliome îl generează automat în exportul CSS, pentru compatibilitate.
Da. Generatorul are un comutator care traduce designul în clase Tailwind (de exemplu backdrop-blur-md bg-white/30).
Da. Blur-urile grele pe elemente mari pot crea lag pe telefoane slabe, pentru că GPU-ul recalculează pixelii la derulare.
Sticla reală reflectă lumina pe margine. Adaugă un border solid de 1px cu opacitate mică (de exemplu rgba(255, 255, 255, 0.2)).
Da, 100% gratuit, fără limite, reclame sau cont.