CSS Glassmorphism generátor

Ez az eszköz egy CSS matt üveg (glassmorphism) effektet épít fel egy félig átlátszó háttér és a backdrop-filter: blur() kombinálásával — húzd a csúszkákat a színes előnézet fölött, hogy lásd, ahogy az üveg kártya elmossa mögötte lévő tartalmat, majd másold ki a CSS-t. A Safari számára szükséges -webkit-backdrop-filter előtagot is kiadja, mivel a backdrop-filter ott továbbra is megköveteli.

Mi ez az eszköz?

A glassmorphism egy UI stílus, ahol egy elem matt üvegnek néz ki: egy félig átlátszó háttér átengedi a mögötte lévő színeket, miközben a backdrop-filter: blur() elmossa azt a hátteret, így az inkább üvegnek, mint egyszerű átlátszó panelnek hat. Egy vékony, félig átlátszó keret és lekerekített sarkok általában lezárják a megjelenést.

Ez az eszköz lehetővé teszi, hogy vizuálisan építsd fel ezt az effektet. Az előnézet szándékosan egy mozgó gradiens háttér felett helyezkedik el, hogy az elmosódás látható legyen — a glassmorphism csak akkor néz ki jól, ha van mögötte szín vagy részlet, nem egy sima fehér oldalon. Állítsd be a háttérszín átlátszóságát, az elmosódás erősségét, a keret átlátszóságát és a sarok lekerekítését, majd másold ki a generált CSS-t.

Forrás: Filter Effects Module Level 1, W3C — ez definiálja a backdrop-filter-t, azt a tulajdonságot, amelyre ez az effekt épül.

Miért érdemes használni?

Élő előnézet egy színes, animált háttér fölött, így valóban láthatod a matt üveg effektet, ahelyett hogy üres háttér előtt tippelnéd az elmosódási értékeket.
Teljes kontroll a háttér átlátszósága, az elmosódás erőssége, a keret átlátszósága és a border-radius felett egy helyen.
Automatikusan kiadja mind a backdrop-filter-t, mind a -webkit-backdrop-filter előtagot, így nem felejted el a Safari támogatást.
Teljes egészében a böngésződben fut — semmi, amit beállítasz, nem kerül feltöltésre sehova.
Ingyenes, nincs regisztráció, mobilon is működik.

Használati útmutató

Válassz háttérszínt, és állítsd be az átlátszóságát — az alacsonyabb átlátszóság (10–25%) hat üvegnek; a magasabb inkább tömör, színezett panelnek néz ki.
Növeld az elmosódás erősségét, hogy elmosd az elem mögött lévő tartalmat — ez az, ami valóban létrehozza a matt üveg megjelenést, elkülönülve magától az átlátszóságtól.
Állítsd be a keret átlátszóságát egy finom fényes élért, ami segít, hogy az üveg kártya különálló felületnek hasson, ne olvadjon bele a háttérbe.
Állítsd be a border-radius-t a lekerekített sarkokhoz — a glassmorphism kártyák szinte mindig lekerekítettek, ritkán élesek.
Másold ki a generált CSS-t, és illeszd be a stíluslapodba. Ne feledd, az elem mögött szükség van valamilyen színre vagy textúrára — a glassmorphism láthatatlan egy sima, egyszínű háttér felett.

Példa

Bemenet

Háttér: fehér 20% átlátszósággal · Elmosódás: 10px · Keret átlátszóság: 30% · Lekerekítés: 16px

Kimenet

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;

Egy klasszikus matt üveg kártyastílus, amelyet bejelentkezési paneleknél, navigációs sávoknál és irányítópult-widgeteknél használnak színes vagy fotós háttér felett.

Safari és böngészőtámogatás

A backdrop-filter-t támogatja a jelenlegi Chrome, Firefox, Edge és Safari, de a Safari korábban megkövetelte a -webkit-backdrop-filter előtagot az előtag nélküli tulajdonság mellett az elmosódás megjelenítéséhez — nélküle a régebbi Safari verziók csendben figyelmen kívül hagyják az elmosódást, és csak a sima átlátszó hátteret mutatják. Ez az eszköz emiatt mindig mindkét deklarációt kiadja.

Az aktuális böngészőkompatibilitási részletekért nézd meg az MDN backdrop-filter dokumentációját: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Miért van szükség valamire a glassmorphism mögött

A backdrop-filter csak azt mossa el, ami vizuálisan az elem mögött van — egy háttérkép, egy gradiens, egy másik színes elem, vagy az alatta görgő tartalom. Egy sima fehér vagy egyszínű háttér felett nincs mit elmosni, így az effekt láthatatlan, és az elem csak egy enyhén színezett, lekerekített dobozként hat. Mindig helyezd a glassmorphism elemeket gradiens, fotó vagy más, mintás háttér fölé, hogy az effekt jól nézzen ki.

Párosítás más CSS effektekkel

A glassmorphism kártyák gyakran kombinálnak egy finom box-shadow-t alul, extra mélységért. Generáld le itt a matt üveg CSS-t, majd adj hozzá egy lágy árnyékot a Box Shadow generátorral, és alkalmazd mindkét deklarációt ugyanarra az elemre.

→ Box Shadow Generátor · Border Radius Generátor

Gyakori kérdések

Miért nem jelenik meg az üveghatás az oldalamon?

A backdrop-filter azt mossa el, ami az elem mögött van. Ha az elemed sima fehér vagy egyszínű háttér felett van, nincs mit elmosni vizuálisan érdekeset, így csak egy enyhén színezett doboznak tűnik. Helyezd gradiens, kép vagy más részletes háttér fölé, hogy a matt üveg effekt látható legyen.

Szükségem van a -webkit-backdrop-filter előtagra?

Igen, ha azt szeretnéd, hogy az effekt megbízhatóan megjelenjen Safariban. Ez az eszköz mindig kiadja mind a szabványos backdrop-filter-t, mind a -webkit- előtagos verziót együtt, mivel a Safari korábban megkövetelte az előtagot az elmosódás alkalmazásához.

Mi a különbség a háttér átlátszósága és az elmosódás között?

A háttér átlátszósága azt szabályozza, mennyi látszik a kiválasztott színezésből, szemben azzal, mennyi látszik változatlanul a mögötte lévőből. Az elmosódás azt szabályozza, mennyire kenődik el/lágyul el az a látható háttér. A glassmorphism mindkettőt együtt használja — némi átlátszóságot plusz némi elmosódást —, nem csak az egyiket önmagában.

Használhatom a backdrop-filter-t bármely elemen?

Igen, de csak azt érinti, ami az adott elem mögött van vizuálisan az oldal megjelenítésén belül, nem az elem saját gyerekeit. Néhány eszközön teljesítménybeli költsége is van, ha sok elemre alkalmazzák vagy gyakran animálják, ezért inkább kevés, kiemelt UI felülethez érdemes használni, mint kártyák, modálisok vagy navigációs sávok, nem több tucat kis elemhez.

Miért alig látszik a keretem?

Az ebben az eszközben szereplő keret egy félig átlátszó fehéret használ, aminek szándékosan visszafogottnak kell lennie — egy világos él, amely segít, hogy az üvegpanel különálló felületnek hasson anélkül, hogy kemény, tömör körvonalnak tűnne. Növeld a keret átlátszóság csúszkáját, ha láthatóbb élt szeretnél.