Generator glassmorphism CSS

Exemple de glassmorphism

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Sticlă clasică Alb cu 22% opacitate și blur 14px: punctul de plecare pentru majoritatea designurilor.

.element {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Sticlă mată Estompare și opacitate mai mari; textul se citește mai ușor.

.element {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Sticlă întunecată Pentru teme închise; textul alb rămâne lizibil.

.element {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Sticlă colorată Sticla primește o tentă de culoare din fundalul semitransparent.

.element {
  background: rgba(124, 58, 237, 0.25);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Aproape transparentă Estompare mică și fără umbră, pentru un efect discret.

.element {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
}

Bară de navigare Colțuri drepte și opacitate mare, pentru un meniu fix peste conținutul care se derulează.

.element {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0px;
}

Cum folosești generatorul de glassmorphism

Reglează estomparea: cu cât e mai mare, cu atât fundalul se vede mai neclar prin card.
Alege culoarea și opacitatea sticlei. O sticlă albă cu 15–30% opacitate este punctul de plecare clasic.
Adaugă o margine semitransparentă și colțuri rotunjite, care fac efectul credibil.
Schimbă fundalul de previzualizare ca să vezi cum arată cardul peste culori diferite.

Cum funcționează

Elementul are un fundal semitransparent, iar backdrop-filter estompează tot ce se află în spatele lui. Efectul se vede doar dacă în spate există ceva colorat sau o imagine; pe un fundal alb uniform, cardul arată doar ca un dreptunghi alb.

.card-sticla {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
}

Varianta -webkit-backdrop-filter este pentru versiunile mai vechi de Safari. saturate() face culorile din spate mai vii, ca la sticla reală.

Întrebări frecvente

De ce nu se vede estomparea?

Verifică trei lucruri: fundalul elementului trebuie să fie semitransparent (nu opac), în spatele lui trebuie să existe conținut colorat, iar un părinte cu overflow: hidden și transform poate limita zona estompată.

Textul de pe sticlă e greu de citit. Ce fac?

Mărește opacitatea fundalului sau estomparea și verifică contrastul. Pe fundaluri foarte variate, o sticlă închisă cu text alb e mai lizibilă.

Afectează performanța?

backdrop-filter se recalculează când conținutul din spate se mișcă. Pe câteva elemente nu e o problemă; pe zeci de carduri peste un fundal animat, poate încetini telefoanele slabe.