Co je to Glassmorphism?
Glassmorphism je trend v uživatelském rozhraní (UI), který napodobuje efekt matného nebo pískovaného skla. Tento styl zpopularizovaly operační systémy jako macOS (Big Sur) a Windows 11 (Fluent Design). Vyznačuje se poloprůhledným pozadím, přes které rozmazaně prosvítají barvy a tvary vrstvy ležící pod ním.
Jak efekt skla technicky funguje?
Tento efekt v CSS nestojí na složitých obrázcích, ale na jedné konkrétní a velmi výkonné vlastnosti: backdrop-filter. Zatímco klasický filter: blur() by rozmazal samotný objekt (například text na kartě), backdrop-filter rozmaže pouze to, co se nachází za ním.
Klíčem k dokonalému vzhledu je pak kombinace s jemně průhlednou barvou (použití formátu rgba) a tenkým, poloprůhledným rámečkem, který simuluje odlesk na hraně skutečného skla.
Kompatibilita prohlížečů
Vlastnost backdrop-filter je dnes podporována všemi moderními prohlížeči (Chrome, Firefox, Edge). U prohlížeče Safari (na iPhonech i Macích) je však stále nutné přidávat prefix -webkit-, jinak efekt nebude vůbec fungovat a karta zůstane pouze průhledná bez rozmazání. Náš generátor tento prefix do výsledného kódu automaticky přidává, takže máte jistotu plné kompatibility.