Generátor CSS glassmorphism efektu

Tento nástroj vytvára CSS efekt matného skla (glassmorphism) kombináciou poloprehľadného pozadia s backdrop-filter: blur() — potiahnite posuvníky nad farebným náhľadom, aby ste videli, ako sklenená karta rozmazáva všetko za ňou, a potom skopírujte CSS. Zároveň generuje aj prefix -webkit-backdrop-filter, ktorý Safari stále potrebuje.

Čo je tento nástroj?

Glassmorphism je štýl rozhrania, kde prvok vyzerá ako matné sklo: poloprehľadné pozadie umožňuje presvitanie farieb za ním, zatiaľ čo backdrop-filter: blur() toto pozadie rozmazáva, aby pôsobilo ako sklo, nie ako obyčajný priehľadný panel. Tenký, poloprehľadný okraj a zaoblené rohy zvyčajne vzhľad doladia.

Tento nástroj umožňuje tento efekt vytvoriť vizuálne. Náhľad sa nachádza nad pohybujúcim sa gradientovým pozadím práve preto, aby bolo rozmazanie viditeľné — glassmorphism sa správne číta len nad niečím s farbou alebo detailom za sebou, nie na plochej bielej stránke. Upravte priehľadnosť farby pozadia, silu rozmazania, priehľadnosť okraja a polomer rohov a potom skopírujte vygenerované CSS.

Zdroj: Filter Effects Module Level 1, W3C — definuje backdrop-filter, vlastnosť, na ktorej je tento efekt postavený.

Prečo ho používať?

Živý náhľad nad farebným animovaným podkladom, takže efekt matného skla naozaj vidíte namiesto hádania hodnôt rozmazania na prázdnom pozadí.
Plná kontrola nad priehľadnosťou pozadia, silou rozmazania podkladu, priehľadnosťou okraja a border-radius na jednom mieste.
Automaticky generuje backdrop-filter aj prefix -webkit-backdrop-filter, aby ste nezabudli na podporu Safari.
Beží úplne vo vašom prehliadači — nič, čo nakonfigurujete, sa nikam nenahráva.
Zadarmo, bez registrácie, funguje na mobile.

Ako sa používa

Vyberte farbu pozadia a upravte jej priehľadnosť — nižšia priehľadnosť (10–25 %) pôsobí ako sklo; vyššia vyzerá skôr ako plný tónovaný panel.
Zvýšte silu rozmazania, aby ste rozmazali, čo je za prvkom — toto je to, čo skutočne vytvára vzhľad matného skla, na rozdiel od samotnej priehľadnosti.
Upravte priehľadnosť okraja, aby ste pridali jemný svetlý okraj, ktorý pomáha sklenej karte pôsobiť ako samostatný povrch namiesto splynutia s pozadím.
Nastavte border-radius pre zaoblené rohy — karty s glassmorphism sú takmer vždy zaoblené, zriedka s ostrými rohmi.
Skopírujte vygenerované CSS a vložte ho do svojho štýlopisu. Nezabudnite, že prvok potrebuje za sebou niečo s farbou alebo textúrou — glassmorphism je neviditeľný na plochom, jednofarebnom pozadí.

Príklad

Vstup

Pozadie: biele pri 20 % priehľadnosti · Rozmazanie: 10px · Priehľadnosť okraja: 30 % · Polomer: 16px

Výstup

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;

Klasický štýl karty z matného skla používaný v prihlasovacích paneloch, navigačných lištách a widgetoch dashboardov nad farebným alebo fotografickým pozadím.

Podpora Safari a prehliadačov

backdrop-filter je podporovaný v aktuálnych verziách Chrome, Firefox, Edge a Safari, ale Safari historicky vyžadoval prefix -webkit-backdrop-filter popri neprefixovanej vlastnosti, aby vykreslil rozmazanie — bez neho staršie verzie Safari rozmazanie ticho ignorujú a zobrazia len ploché priehľadné pozadie. Preto tento nástroj vždy generuje obe deklarácie.

Aktuálne informácie o kompatibilite prehliadačov nájdete v dokumentácii MDN k backdrop-filter: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Prečo glassmorphism potrebuje niečo za sebou

backdrop-filter rozmazáva len to, čo je vizuálne za prvkom — obrázok pozadia, gradient, iný farebný prvok alebo obsah posúvajúci sa pod ním. Nad obyčajným bielym alebo jednofarebným pozadím nie je čo rozmazávať, takže efekt je neviditeľný a prvok vyzerá len ako mierne tónovaný, zaoblený box. Vždy umiestnite prvky s glassmorphism nad gradient, fotku alebo inak rušné pozadie, aby sa efekt prejavil.

Kombinácia s ďalšími CSS efektmi

Karty s glassmorphism sa bežne kombinujú s jemným box-shadow pod nimi pre ďalšiu hĺbku. Vytvorte tu CSS matného skla, potom pridajte jemný tieň pomocou Generátora tieňov boxu a aplikujte obe deklarácie na ten istý prvok.

→ Generátor box-shadow · Generátor border-radius

Časté otázky

Prečo sa sklenený efekt nezobrazuje na mojej stránke?

backdrop-filter rozmazáva to, čo je za prvkom. Ak váš prvok sedí nad obyčajným bielym alebo jednofarebným pozadím, nie je tam nič zaujímavé na rozmazanie, takže vyzerá len ako slabo tónovaný box. Umiestnite ho nad gradient, obrázok alebo iné detailné pozadie, aby bol efekt matného skla viditeľný.

Potrebujem prefix -webkit-backdrop-filter?

Áno, ak chcete, aby sa efekt spoľahlivo vykreslil v Safari. Tento nástroj vždy generuje spolu štandardný backdrop-filter aj verziu s prefixom -webkit-, keďže Safari historicky potreboval prefix na aplikovanie rozmazania.

Aký je rozdiel medzi priehľadnosťou pozadia a rozmazaním?

Priehľadnosť pozadia určuje, koľko z vybranej tónovacej farby je vidno oproti tomu, koľko z toho, čo je za ňou, presvitá nezmenené. Rozmazanie určuje, koľko je toto viditeľné pozadie roztierané/zjemnené. Glassmorphism používa obe spolu — nejakú priehľadnosť plus nejaké rozmazanie — namiesto len jedného z nich.

Môžem backdrop-filter použiť na akýkoľvek prvok?

Áno, ale ovplyvňuje len to, čo je vizuálne za týmto prvkom v rámci vykresľovania stránky, nie vlastných potomkov prvku. Na niektorých zariadeniach má tiež výkonnostné náklady pri aplikovaní na veľa prvkov alebo časté animovanie, takže je najlepšie ho použiť pre malý počet výrazných prvkov rozhrania ako karty, modálne okná alebo navigačné lišty, nie na desiatky malých prvkov.

Prečo je môj okraj sotva viditeľný?

Okraj v tomto nástroji používa poloprehľadnú bielu, ktorá je zámerne jemná — svetlý okraj, ktorý pomáha sklenému panelu pôsobiť ako samostatný povrch bez toho, aby vyzeral ako tvrdý, nepriehľadný obrys. Ak chcete výraznejší okraj, zvýšte posuvník priehľadnosti okraja.