Generátor glassmorphismu

backdrop-filter: blur() je CSS vlastnost, která vytváří vzhled matného skla – průsvitný panel, který rozostřuje vše, co se za ním pohybuje, místo aby jen překrýval plochou barvu. Háček je v tom, že kvalitu rozostření na statickém vzorníku téměř nelze posoudit; přesvědčivě působí, až když se pod ním něco skutečně hýbe, jako na reálné stránce s obsahem, videem nebo animovanou hlavičkou. Tento generátor umisťuje kartu náhledu nad skutečně animované pozadí, nikoli nad statický obrázek, takže to, co vidíte při posouvání jezdci, odpovídá tomu, co zažijí návštěvníci.

Pozadí je reálná CSS animace: velký linear-gradient vykreslený na 400 % velikosti prvku, jehož background-position se pomocí @keyframes plynule posouvá tam a zpět ve smyčce – žádná animační smyčka v JavaScriptu, žádné plátno canvas, jen stejná technika plynulého posouvání pozadí používaná v produkčních hlavičkách. Rozostření, barva a krytí odstínu, barva, krytí a šířka zvýraznění okraje, zaoblení rohů a jemnost stínu – to vše řídí živé styly plovoucí karty a okno s kopírovatelným CSS zrcadlí přesně tytéž hodnoty.

Ne každý prohlížeč podporuje backdrop-filter, proto generátor vytváří také opravdový blok @supports not (backdrop-filter: blur(1px)) – ne symbolické gesto, ale záložní pravidlo s vlastní barvou pozadí vypočítanou z vašeho skutečného krytí odstínu. Protože průsvitnost bez rozostření vypadá znatelně hůř (vše za prvkem prosvítá neostře), záložní řešení automaticky zvýší alfa kanál nad vámi zvolené krytí odstínu a komentář ve vygenerovaném CSS přesně vysvětluje proč a o kolik.

Vše se počítá a vykresluje přímo ve vašem prohlížeči: žádné nahrávání, žádný účet, žádná komunikace se serverem. Jakmile karta vypadá správně, zkopírujte CSS, vložte ho na libovolný prvek, který má být nad fotkou, videem nebo gradientem, a ponechte si blok @supports, aby i starší prohlížeče dostaly čitelnou, krytější kartu namísto téměř neviditelné.