Generátor Glassmorphism
Glassmorphism generátor vytváří efekt matného skla pomocí CSS backdrop-filter a umožňuje upravit rozostření, průhlednost pozadí, sytost, průhlednost okraje, zaoblení a barvu tónování s živým náhledem.
O tomto nástroji
Glassmorphism generátor vytváří efekt matného skla pomocí CSS backdrop-filter a umožňuje upravit rozostření, průhlednost pozadí, sytost, průhlednost okraje, zaoblení a barvu tónování s živým náhledem.
Jak ho použít
- Vyber barvu tónování skla.
- Uprav rozostření, průhlednost a sytost.
- Nastav průhlednost okraje a border radius.
- Klikni na Copy CSS.
Dobré vědět
- Efekt využívá backdrop-filter: blur() saturate(), který rozostří vše, co je za prvkem.
- Je potřeba poloprůhledné pozadí (rgba), jinak rozostření není vidět.
- Vygenerované CSS obsahuje prefix -webkit-backdrop-filter pro Safari.
- Sklo vynikne nejlépe nad barevným pozadím nebo obrázkem; na jednolité barvě rozostření vidět není.
- Hlídej kontrast textu — průsvitné panely můžou nad pestrým pozadím spadnout pod kontrast podle WCAG.
Běží celý ve vašem prohlížeči — nic, co zadáte, se nenahrává ani neukládá.
Časté dotazy
Jak v CSS udělám skleněný efekt?
Dej prvku poloprůhledné pozadí, například rgba(255,255,255,0.15), a backdrop-filter: blur(12px); tento nástroj ti napíše celé pravidlo.
Proč mi nefunguje backdrop-filter?
Prvek potřebuje průhledné nebo poloprůhledné pozadí a za ním musí být něco, co se dá rozostřit. Safari navíc potřebuje prefix -webkit-.
Je glassmorphism přístupný?
Může být, pokud si text zachová dostatečný kontrast. Otestuj barvy textu nad nejpestřejší částí pozadí.
Zhoršuje backdrop-filter výkon?
Rozostření je náročné na GPU, takže ho nepoužívej na velmi velké plochy ani na mnoho prvků najednou, zvlášť na slabších telefonech.