Generator Glassmorphism

Toate instrumentele

Creează carduri UI din sticlă mată cu estompare de fundal, transparență și borduri, apoi copiază CSS-ul.

Previzualizare

Card de sticlă

Sticlă mată plutind peste un fundal viu.

Fundal
Cod CSS
—

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.

px
%
px
Umplere de sticlă
20%
Bordură
30%
Presetări de calitate

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

  1. Pornește de la o presetare — subtle, frosted, vivid sau dark glass — sau de la valorile implicite.
  2. Ajustează blur-ul și saturația filtrului de fundal.
  3. Setează culoarea și transparența nuanței de sticlă.
  4. Ajustează culoarea marginii, opacitatea marginii, raza colțurilor și umbra exterioară.
  5. Copiază CSS-ul — include deja proprietatea cu prefixul -webkit- pentru Safari.

Întrebări frecvente

Panoul primește o culoare de fundal semi-transparentă, iar backdrop-filter: blur() estompează tot ce se randează în spatele lui. O creștere a saturației păstrează culorile estompate vii, iar o margine subtilă, semi-opacă, vinde marginea de sticlă.

backdrop-filter are nevoie de un fundal translucid pe element și de suport din partea browserului — Firefox l-a activat abia din versiunea 103. Safari are nevoie de prefixul -webkit-backdrop-filter, pe care CSS-ul generat îl include deja. Definește întotdeauna un fundal solid de rezervă.

Gestionarea contrastului. Mărește blur-ul sau scade transparența până când textul trece ghidajele de contrast peste cel mai aglomerat fundal posibil, și adaugă marginea, ca marginea cardului să rămână vizibilă atât pe zone deschise, cât și pe cele întunecate.

Este unul dintre cele mai costisitoare efecte CSS, deoarece browserul re-estompează fundalul pe măsură ce conținutul se mișcă. Folosește-l pe câteva suprafețe cheie, nu pe zeci de carduri suprapuse, și testează scroll-ul pe dispozitive mobile de gamă medie.

Da, complet gratuit și bazat pe browser — ajustează sliderele și copiază CSS-ul fără cont și fără încărcare de fișiere.
Distribuiți
Instrumente conexe
Constructor de semnătură e-mail Proiectează o semnătură HTML profesională de e-mail din 30 de șabloane, personalizez și salveaz-o. Gratuit
Icoană în PNG Convertește Bootstrap Icons, Font Awesome și altele în imagini PNG personalizate — gratuit, în browserul tău. Gratuit
Generator de icoane pentru aplicații Generează un set complet de icoane pentru App Store și Google Play — fundaluri premium cu gradient, mesh și model, construit din logo-ul tău. Gratuit
Generator de favicon Construiește un pachet complet de favicon-uri dintr-un logo, o icoană de tip font sau un monogram — favicon.ico, PNG-uri moderne, icoana Apple touch, icoane PWA, un manifest web și fragmentul HTML. Gratuit
Generator CSS Box Shadow Creează umbre CSS stratificate cu glisoare live pentru offset, estompare, extindere, culoare, opacitate și inset — previzualizează pe un element real și copiază CSS-ul gata de lipit instant. Gratuit
Generator CSS Border Radius Creează vizual border-radius CSS cu previzualizare în timp real și copiază cod gata de producție. Gratuit
Căutări populare
generator glassmorphism css generator css glassmorphism efect sticlă mată css estompare backdrop-filter css generator card de sticlă css creator efect de sticlă css generator fundal glassmorphism generator card cu estompare css
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.
Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.