Sklo
Poloměr blur() uvnitř backdrop-filter.
Přesycení pozadí dělá rozdíl mezi „rozmazané" a „jako sklo".
Při 100 % je prvek neprůhledný a efekt zmizí.
Okraj, rohy a stín
Nula okraj z vygenerovaného CSS vynechá.
Nula stín z vygenerovaného CSS vynechá.
Přednastavení
Čitelnost
Kontrast se počítá proti průměrné barvě zvolené scény překryté sklem. Skutečné pozadí bývá nerovnoměrné, takže berte číslo jako orientační horní odhad.
CSS kód
Na co si dát pozor u backdrop-filter
Jak generátor použít
- Vyberte si jedno z přednastavení, nebo začněte rovnou od výchozích hodnot.
- Posuvníky nastavte rozostření pozadí, krytí skla, sytost, okraj, zaoblení a stín.
- Přepněte scénu pozadí a zkontrolujte, jak sklo vypadá na světlém i tmavém podkladu.
- Podívejte se na kontrast textu pod náhledem. Nástroj hlásí, jestli splní WCAG AA.
- Zkopírujte hotové CSS a vložte ho k sobě do stylů.
Co je glassmorphism
Glassmorphism je vzhled, kdy prvek vypadá jako tabule matného skla. Pozadí za ním prosvítá, ale je rozostřené, takže je vidět barva a pohyb, ne detaily. K tomu patří tenký světlý okraj a jemný stín, které sklu dodají hranu a odsadí ho od podkladu.
Do širšího povědomí ho dostal Apple s macOS Big Sur a s iOS, kde se průsvitné panely objevují napříč systémem. Termín sám vznikl v roce 2020 a od té doby se drží hlavně na přihlašovacích formulářích, kartách a plovoucích panelech nad fotkou nebo gradientem.
Vlastnost backdrop-filter a podpora v prohlížečích
Celý efekt stojí na CSS vlastnosti backdrop-filter, která filtruje to, co je za prvkem, ne prvek samotný. Bez ní by rozostření zasáhlo i text uvnitř karty. Podporují ji všechny současné prohlížeče, ale Safari ji potřebuje s předponou -webkit-, takže ji generátor vypisuje jako první.
Nejčastější důvod, proč efekt nefunguje, je neprůhledné pozadí prvku. Za plnou barvou není co rozostřovat, takže musíte použít poloprůhlednou hodnotu, typicky rgba s krytím kolem dvaceti procent. Druhý obvyklý kámen úrazu je overflow: hidden na rodiči, který filtr v některých případech potlačí.
Kde má sklo meze
Rozostření pozadí je pro prohlížeč drahá operace, protože se přepočítává při každém překreslení. Na jedné kartě to nepoznáte. Na dvaceti položkách seznamu, kterými se roluje, už se to projeví trhaným pohybem, hlavně na slabších telefonech. Nechte proto sklo jen na několika prvcích, ne jako výchozí styl všeho.
Druhá potíž je čitelnost. Pod textem prosvítá pozadí, které se mění, takže někde má písmo dost kontrastu a o kousek vedle už ne. Nástroj proto kontrast průběžně počítá. Když ohlásí, že nestačí, zvyšte krytí skla nebo přepněte barvu textu. Podrobněji kontrast dvou konkrétních barev rozebere kontrola kontrastu.
Časté otázky
Proč mi backdrop-filter nefunguje?
Nejspíš má prvek neprůhledné pozadí. Filtr rozostřuje to, co je za ním, a přes plnou barvu není co vidět. Nastavte poloprůhlednou hodnotu a v Safari přidejte předponu -webkit-backdrop-filter. Když to nepomůže, podívejte se i na rodičovské prvky, jestli na nich není overflow: hidden.
Jaký je rozdíl mezi glassmorphismem a neumorphismem?
Sklo je průsvitné a leží nad barevným pozadím, které skrz něj prosvítá. Neumorphism naopak pracuje s jednobarevným podkladem a tvary z něj jakoby vystupují pomocí dvojice světlého a tmavého stínu. Neumorphism má navíc pověst špatně čitelného, protože hrany nemají skoro žádný kontrast.
Používá Apple glassmorphism?
Ano, průsvitné panely jsou součástí macOS i iOS a novější Liquid Glass tenhle směr posouvá dál a přidává odlesky i lom světla. Na webu se dá napodobit jen ta jednodušší část, tedy rozostření a průsvitnost, protože CSS lom světla neumí.
Je glassmorphism ještě aktuální?
Jako celoplošný styl se přežil, ale jako prvek se drží. Funguje na plovoucích panelech nad fotkou nebo videem, kde má co rozostřovat a kde odsadí obsah od pozadí. Na běžné kartě nad bílým pozadím ztrácí smysl, protože tam není co rozostřovat.
Jak sklo obarvit?
Změňte barvu skla a nechte krytí nízko, kolem deseti až dvaceti procent. Vyšší hodnoty pozadí přebijí a z efektu zůstane obyčejná poloprůhledná plocha. Sytost nad sto procent barvy pod sklem zvýrazní, takže podklad působí živěji.