Generator CSS glassmorphisma

Ovaj alat gradi CSS efekt mat stakla (glassmorphism) kombinirajući poluprozirnu pozadinu s backdrop-filter: blur() — povucite klizače preko šarenog prikaza pregleda kako biste vidjeli zamućenje staklene kartice na svemu iza nje, zatim kopirajte CSS. Također ispisuje -webkit-backdrop-filter prefiks koji Safari treba, budući da backdrop-filter tamo i dalje zahtijeva prefiks.

Što je ovaj alat?

Glassmorphism je UI stil u kojem element izgleda kao mat staklo: poluprozirna pozadina dopušta da boje iza nje prosijavaju, dok backdrop-filter: blur() zamućuje tu pozadinu tako da djeluje kao staklo, a ne kao obična prozirna ploča. Tanak, poluprozirni obrub i zaobljeni rubovi obično upotpunjuju izgled.

Ovaj alat omogućuje vizualnu izradu tog efekta. Pregled se nalazi iznad pokretne gradijentne pozadine upravo zato da zamućenje bude vidljivo — glassmorphism se ispravno prikazuje samo iznad nečega s bojom ili detaljima iza sebe, ne na ravnoj bijeloj stranici. Prilagodite prozirnost pozadinske boje, jačinu zamućenja, prozirnost obruba i radijus kutova, zatim kopirajte generirani CSS.

Izvor: Filter Effects Module Level 1, W3C — definira backdrop-filter, svojstvo na kojem je ovaj efekt izgrađen.

Zašto ga koristiti?

Prikaz uživo iznad šarene animirane pozadine, tako da stvarno vidite efekt mat stakla umjesto nagađanja vrijednosti zamućenja na praznoj pozadini.
Potpuna kontrola nad prozirnošću pozadine, jačinom zamućenja pozadinskog sloja, prozirnošću obruba i border-radiusom na jednom mjestu.
Automatski ispisuje i backdrop-filter i -webkit-backdrop-filter prefiks, tako da ne zaboravite podršku za Safari.
Izvodi se u potpunosti u vašem pregledniku — ništa što konfigurirate ne šalje se nikamo.
Besplatno, bez prijave, radi na mobitelu.

Kako ga koristiti

Odaberite pozadinsku boju i prilagodite njenu prozirnost — niža prozirnost (10–25%) djeluje kao staklo; viša prozirnost izgleda više kao puna obojena ploča.
Povećajte jačinu zamućenja kako biste zamutili ono iza elementa — ovo je ono što stvarno stvara izgled mat stakla, odvojeno od same prozirnosti.
Prilagodite prozirnost obruba kako biste dodali suptilan svijetli rub, što pomaže da staklena kartica djeluje kao zasebna površina umjesto da se stapa s pozadinom.
Postavite border-radius za zaobljene rubove — kartice glassmorphisma gotovo su uvijek zaobljene, rijetko s oštrim kutovima.
Kopirajte generirani CSS i zalijepite ga u svoj stylesheet. Zapamtite da element treba nešto s bojom ili teksturom iza sebe — glassmorphism je nevidljiv na ravnoj, jednobojnoj pozadini.

Primjer

Ulaz

Pozadina: bijela pri 20% prozirnosti · Zamućenje: 10px · Prozirnost obruba: 30% · Radijus: 16px

Izlaz

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;

Klasičan stil kartice mat stakla korišten na panelima za prijavu, navigacijskim trakama i widgetima dashboarda iznad šarene ili fotografske pozadine.

Safari i podrška preglednika

backdrop-filter je podržan u trenutnim verzijama Chromea, Firefoxa, Edgea i Safarija, no Safari je povijesno zahtijevao prefiks -webkit-backdrop-filter uz svojstvo bez prefiksa kako bi se zamućenje prikazalo — bez toga starije verzije Safarija tiho zanemaruju zamućenje i prikazuju samo ravnu prozirnu pozadinu. Ovaj alat zato uvijek ispisuje obje deklaracije.

Pogledajte MDN-ovu dokumentaciju za backdrop-filter za trenutne podatke o kompatibilnosti preglednika: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Zašto glassmorphismu treba nešto iza sebe

backdrop-filter zamućuje samo ono što je vizualno iza elementa — pozadinsku sliku, gradijent, drugi obojeni element, ili sadržaj koji se pomiče ispod. Iznad obične bijele ili jednobojne pozadine nema ničega za zamućivanje, pa je efekt nevidljiv i element jednostavno izgleda kao blago obojena, zaobljena kutija. Uvijek postavite elemente glassmorphisma iznad gradijenta, fotografije, ili inače zauzete pozadine da bi se efekt vidio.

Uparivanje s drugim CSS efektima

Kartice glassmorphisma često kombiniraju suptilan box-shadow ispod za dodatnu dubinu. Generirajte CSS mat stakla ovdje, zatim dodajte mekanu sjenu Generatorom Box Shadowa i primijenite obje deklaracije na isti element.

→ Generator box-shadow · Generator border-radius

Često postavljana pitanja

Zašto se efekt stakla ne prikazuje na mojoj stranici?

backdrop-filter zamućuje ono što je iza elementa. Ako se vaš element nalazi iznad ravne bijele ili jednobojne pozadine, nema ničeg vizualno zanimljivog za zamućivanje, pa jednostavno izgleda kao blago obojena kutija. Postavite ga iznad gradijenta, slike ili druge detaljne pozadine kako bi se efekt mat stakla vidio.

Trebam li prefiks -webkit-backdrop-filter?

Da, ako želite da se efekt pouzdano prikazuje u Safariju. Ovaj alat uvijek zajedno ispisuje standardni backdrop-filter i -webkit- prefiksiranu verziju, budući da je Safari povijesno trebao prefiks za primjenu zamućenja.

Koja je razlika između prozirnosti pozadine i zamućenja?

Prozirnost pozadine kontrolira koliko se prikazuje odabrana boja tona naspram toga koliko se ono iza prosijava neizmijenjeno. Zamućenje kontrolira koliko je ta vidljiva pozadina razmazana/omekšana. Glassmorphism koristi oboje zajedno — nešto prozirnosti plus nešto zamućenja — umjesto samo jednog.

Mogu li koristiti backdrop-filter na bilo kojem elementu?

Da, ali utječe samo na ono što je vizualno iza tog elementa unutar iscrtavanja stranice, ne na djecu elementa. Također ima cijenu performansi na nekim uređajima kad se primijeni na mnogo elemenata ili često animira, pa je najbolje koristiti ga za manji broj istaknutih UI površina poput kartica, modalnih prozora ili navigacijskih traka, a ne desetaka malih elemenata.

Zašto je moj obrub jedva vidljiv?

Obrub u ovom alatu koristi poluprozirnu bijelu boju, namijenjenu suptilnosti — svijetli rub koji pomaže da stakleni panel djeluje kao zasebna površina bez izgleda tvrdog, neprozirnog obrisa. Podignite klizač prozirnosti obruba ako želite vidljiviji rub.