Generator CSS Glassmorphism

Acest instrument construiește un efect CSS de sticlă mată (glassmorphism), combinând un fundal semi-transparent cu backdrop-filter: blur() — trage sliderele peste previzualizarea colorată pentru a vedea cardul de sticlă estompând tot ce este în spatele lui, apoi copiază CSS-ul. Generează și prefixul -webkit-backdrop-filter de care are nevoie Safari, deoarece backdrop-filter încă îl necesită acolo.

Ce este acest instrument?

Glassmorphism este un stil de interfață în care un element arată ca sticlă mată: un fundal semi-transparent lasă culorile din spate să se vadă, în timp ce backdrop-filter: blur() estompează acel fundal, astfel încât se citește ca sticlă, nu ca un panou transparent simplu. O margine subțire, semi-transparentă, și colțuri rotunjite completează de obicei aspectul.

Acest instrument îți permite să construiești acel efect vizual. Previzualizarea stă peste un fundal cu gradient în mișcare, special pentru ca estomparea să fie vizibilă — glassmorphism se citește corect doar peste ceva cu culoare sau detaliu în spate, nu peste o pagină albă simplă. Ajustează opacitatea culorii de fundal, intensitatea estompării, opacitatea marginii și raza colțului, apoi copiază CSS-ul generat.

Sursă: Filter Effects Module Level 1, W3C — definește backdrop-filter, proprietatea pe care este construit acest efect.

De ce să-l folosești?

Previzualizare live peste un fundal animat colorat, astfel încât să vezi efectiv efectul de sticlă mată, în loc să ghicești valorile de estompare pe un fundal gol.
Control complet asupra opacității fundalului, intensității estompării fundalului, opacității marginii și border-radius, într-un singur loc.
Generează automat atât backdrop-filter, cât și prefixul -webkit-backdrop-filter, astfel încât să nu uiți suportul Safari.
Rulează complet în browserul tău — nimic din ce configurezi nu este încărcat nicăieri.
Gratuit, fără înregistrare, funcționează pe mobil.

Cum se folosește

Alege o culoare de fundal și ajustează-i opacitatea — opacitatea mai mică (10–25%) se citește ca sticlă; opacitatea mai mare arată mai mult ca un panou colorat solid.
Crește intensitatea estompării pentru a estompa ce este în spatele elementului — acest lucru creează de fapt aspectul de sticlă mată, distinct de transparența în sine.
Ajustează opacitatea marginii pentru a adăuga o margine subtilă luminoasă, care ajută cardul de sticlă să se citească ca o suprafață distinctă, nu să se amestece cu fundalul.
Setează border-radius pentru colțuri rotunjite — cardurile glassmorphism au aproape întotdeauna colțuri rotunjite, rareori ascuțite.
Copiază CSS-ul generat și lipește-l în foaia ta de stiluri. Ține minte că elementul are nevoie de ceva cu culoare sau textură în spate — glassmorphism este invizibil peste un fundal plat, dintr-o singură culoare.

Exemplu

Intrare

Fundal: alb la 20% opacitate · Estompare: 10px · Opacitate margine: 30% · Rază: 16px

Rezultat

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Un stil clasic de card sticlă mată, folosit în panouri de autentificare, bare de navigare și widget-uri de tablou de bord, peste un fundal colorat sau fotografic.

Safari și suportul browserelor

backdrop-filter este suportat în versiunile actuale de Chrome, Firefox, Edge și Safari, dar Safari a necesitat istoric prefixul -webkit-backdrop-filter alături de proprietatea neprefixată pentru a randa estomparea — fără el, versiunile mai vechi de Safari ignoră silențios estomparea și arată doar fundalul transparent plat. Acest instrument generează întotdeauna ambele declarații din acest motiv.

Vezi documentația backdrop-filter de pe MDN pentru detalii actuale de compatibilitate cu browserele: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

De ce glassmorphism are nevoie de ceva în spate

backdrop-filter estompează doar ce este vizual în spatele elementului — o imagine de fundal, un gradient, un alt element colorat sau conținut care derulează dedesubt. Peste un fundal alb sau dintr-o singură culoare nu există nimic de estompat, deci efectul este invizibil și elementul arată doar ca o casetă rotunjită, ușor colorată. Plasează întotdeauna elementele glassmorphism peste un gradient, o fotografie sau un fundal altfel aglomerat, pentru ca efectul să se citească.

Combinarea cu alte efecte CSS

Cardurile glassmorphism combină de obicei un box-shadow subtil dedesubt, pentru profunzime suplimentară. Generează CSS-ul de sticlă mată aici, apoi adaugă o umbră moale cu Generatorul Box Shadow și aplică ambele declarații pe același element.

→ Generator Box Shadow · Generator Border Radius

Întrebări frecvente

De ce nu apare efectul de sticlă pe pagina mea?

backdrop-filter estompează ce este în spatele elementului. Dacă elementul tău stă peste un fundal alb sau dintr-o culoare solidă, nu există nimic vizual interesant de estompat, deci arată doar ca o casetă ușor colorată. Plasează-l peste un gradient, o imagine sau un fundal altfel detaliat pentru ca efectul de sticlă mată să fie vizibil.

Am nevoie de prefixul -webkit-backdrop-filter?

Da, dacă vrei ca efectul să se redea fiabil în Safari. Acest instrument generează întotdeauna atât backdrop-filter standard, cât și versiunea prefixată -webkit- împreună, deoarece Safari a avut istoric nevoie de prefix pentru a aplica estomparea.

Care este diferența dintre opacitatea fundalului și estompare?

Opacitatea fundalului controlează cât de mult din culoarea de nuanțare aleasă se vede, comparativ cu cât din ce este în spate se vede neschimbat. Estomparea controlează cât de mult este acel fundal vizibil, întins/înmuiat. Glassmorphism folosește ambele împreună — puțină transparență plus puțină estompare — nu doar una singură.

Pot folosi backdrop-filter pe orice element?

Da, dar afectează doar ce este vizual în spatele acelui element în cadrul randării paginii, nu copiii elementului însuși. Are și un cost de performanță pe unele dispozitive când este aplicat pe multe elemente sau animat frecvent, deci este cel mai bine folosit pentru un număr mic de suprafețe de interfață proeminente, precum carduri, modale sau bare de navigare, nu pe zeci de elemente mici.

De ce marginea mea este abia vizibilă?

Marginea din acest instrument folosește un alb semi-transparent, care e menit să fie subtil — o margine luminoasă care ajută panoul de sticlă să se citească ca o suprafață distinctă, fără să arate ca un contur dur, opac. Crește sliderul opacității marginii dacă vrei o margine mai vizibilă.