Generátor CSS Glassmorphism

Tento nástroj vytváří CSS efekt matného skla (glassmorphism) kombinací poloprůhledného pozadí s backdrop-filter: blur() — přetáhněte posuvníky nad barevným náhledem a sledujte, jak skleněná karta rozmazává vše za ní, poté zkopírujte CSS. Vypisuje také předponu -webkit-backdrop-filter, kterou Safari stále potřebuje, protože backdrop-filter ji tam stále vyžaduje.

Co je tento nástroj?

Glassmorphism je styl uživatelského rozhraní, kde element vypadá jako matné sklo: poloprůhledné pozadí nechává prosvítat barvy za ním, zatímco backdrop-filter: blur() toto pozadí rozmaže, takže se to čte jako sklo, ne jako obyčejný průhledný panel. Tenký, poloprůhledný okraj a zaoblené rohy obvykle dokreslí vzhled.

Tento nástroj vám umožňuje vytvořit tento efekt vizuálně. Náhled sedí nad pohyblivým gradientovým pozadím záměrně proto, aby bylo rozmazání viditelné — glassmorphism se čte správně jen nad něčím s barvou nebo detailem za sebou, ne nad plochou bílou stránkou. Upravte průhlednost barvy pozadí, sílu rozmazání, průhlednost okraje a poloměr rohů, poté zkopírujte vygenerované CSS.

Zdroj: Filter Effects Module Level 1, W3C — definuje backdrop-filter, vlastnost, na které je tento efekt postaven.

Proč ho používat?

Živý náhled nad barevným animovaným pozadím, takže skutečně vidíte efekt matného skla místo hádání hodnot rozmazání nad prázdným pozadím.
Plná kontrola nad průhledností pozadí, silou rozmazání backdrop, průhledností okraje a border-radius na jednom místě.
Automaticky vypisuje jak backdrop-filter, tak předponu -webkit-backdrop-filter, takže nezapomenete na podporu Safari.
Běží kompletně ve vašem prohlížeči — nic, co nastavíte, se nikam nenahrává.
Zdarma, bez registrace, funguje na mobilu.

Jak se používá

Vyberte barvu pozadí a upravte její průhlednost — nižší průhlednost (10–25 %) se čte jako sklo; vyšší průhlednost vypadá spíš jako plný tónovaný panel.
Zvyšte sílu rozmazání, abyste rozmazali vše za elementem — to je to, co skutečně vytváří vzhled matného skla, odlišné od samotné průhlednosti.
Upravte průhlednost okraje pro přidání jemné světlé hrany, což pomáhá, aby se skleněná karta četla jako samostatná plocha, ne aby splývala s pozadím.
Nastavte border-radius pro zaoblené rohy — karty glassmorphism jsou téměř vždy zaoblené, málokdy ostrohranné.
Zkopírujte vygenerované CSS a vložte ho do svého stylopisu. Pamatujte, že element potřebuje za sebou něco s barvou nebo texturou — glassmorphism je neviditelný nad plochým jednobarevným pozadím.

Příklad

Vstup

Pozadí: bílá při 20% průhlednosti · Rozmazání: 10px · Průhlednost okraje: 30% · Poloměr: 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ý styl karty z matného skla používaný v přihlašovacích panelech, navigačních lištách a widgetech dashboardu nad barevným nebo fotografickým pozadím.

Podpora Safari a prohlížečů

backdrop-filter je podporovaný v aktuálních verzích Chrome, Firefox, Edge a Safari, ale Safari historicky vyžadoval předponu -webkit-backdrop-filter vedle nepředponové vlastnosti pro vykreslení rozmazání — bez ní starší verze Safari rozmazání tiše ignorují a zobrazí jen ploché průhledné pozadí. Tento nástroj proto vždy vypíše obě deklarace.

Podrobnosti o aktuální kompatibilitě prohlížečů najdete v dokumentaci MDN k backdrop-filter: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Proč glassmorphism potřebuje něco za sebou

backdrop-filter rozmazává pouze to, co je vizuálně za elementem — obrázek pozadí, gradient, jiný barevný element nebo obsah posouvající se pod ním. Nad prostým bílým nebo jednobarevným pozadím není co rozmazat, takže je efekt neviditelný a element vypadá jen jako mírně tónovaný zaoblený box. Elementy s glassmorphismem vždy umísťujte nad gradient, fotku nebo jinak rušné pozadí, aby se efekt projevil.

Kombinace s dalšími CSS efekty

Karty glassmorphism se běžně kombinují s jemným box-shadow pod nimi pro extra hloubku. Vygenerujte zde CSS matného skla, poté přidejte jemný stín pomocí Generátoru Box Shadow a použijte obě deklarace na stejný element.

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

Časté dotazy

Proč se efekt skla na mé stránce nezobrazuje?

backdrop-filter rozmazává to, co je za elementem. Pokud váš element sedí nad prostým bílým nebo jednobarevným pozadím, není co vizuálně zajímavého rozmazat, takže vypadá jen jako slabě tónovaný box. Umístěte ho nad gradient, obrázek nebo jiné detailní pozadí, aby byl efekt matného skla viditelný.

Potřebuji předponu -webkit-backdrop-filter?

Ano, pokud chcete, aby se efekt spolehlivě vykresloval v Safari. Tento nástroj vždy vypíše jak standardní backdrop-filter, tak verzi s předponou -webkit- společně, protože Safari historicky potřeboval předponu pro aplikaci rozmazání.

Jaký je rozdíl mezi průhledností pozadí a rozmazáním?

Průhlednost pozadí řídí, kolik z vybrané tónovací barvy je vidět versus kolik z toho, co je za ní, prosvítá beze změny. Rozmazání řídí, jak moc je toto viditelné pozadí rozmazané/zjemněné. Glassmorphism používá obojí dohromady — nějakou průhlednost plus nějaké rozmazání — místo pouze jednoho z nich.

Můžu backdrop-filter použít na jakýkoli element?

Ano, ale ovlivňuje jen to, co je vizuálně za tímto elementem v rámci vykreslování stránky, ne vlastní potomky elementu. Má také výkonnostní náklady na některých zařízeních, pokud je aplikován na mnoho elementů nebo často animovaný, takže je nejlepší ho použít pro malý počet výrazných UI ploch, jako jsou karty, modální okna nebo navigační lišty, ne pro desítky malých elementů.

Proč je můj okraj sotva viditelný?

Okraj v tomto nástroji používá poloprůhlednou bílou, což má být jemné — světlá hrana, která pomáhá skleněnému panelu číst se jako samostatná plocha, aniž by vypadala jako tvrdý, neprůhledný obrys. Zvyšte posuvník průhlednosti okraje, pokud chcete výraznější hranu.