Tvořte trendy UI efekty matného skla. Upravte rozostření, průhlednost a okraje a zkopírujte CSS přímo do projektu. 100% zdarma. Bez registrace.
Módní efekt matného skla pro moderní webový design.
Navrženo od základu pro přísné soukromí, okamžité spuštění a nulové tření. Žádné předplatné, paywally ani registrace účtu.
Upravujte rozostření, krytí a sytost v reálném čase nad živým pozadím a okamžitě si prohlédněte skleněný efekt.
Automaticky generuje kód backdrop-filter s prefixem webkit, takže funguje v Safari, Chrome i Firefoxu.
Generujte standardní třídy CSS nebo okamžitě převeďte vizuální návrh na utility třídy Tailwind CSS.
100% běh na straně klienta znamená, že posunete posuvník a matematické CSS se aktualizuje bez zpoždění.
Porovnejte náš lokální WebAssembly engine s legacy cloudovými nástroji.
| Funkce | Utiliome (lokální prohlížeč) | Legacy cloudové převodníky |
|---|---|---|
| Živý náhled | Interaktivní plátno v reálném čase | Statické generátory kódu |
| Výstup kódu | Vanilla CSS i utility třídy Tailwind | Pouze CSS |
| Kompatibilita | Automaticky přidá -webkit-backdrop-filter | Vyžaduje ruční prefixy |
| Cena | Zdarma navždy, bez reklam | Paywally za prémiová rozložení |
Není nutná žádná instalace softwaru. Vše běží přímo ve vašem webovém prohlížeči.
Posuvníkem blur určete, jak silně se mají prvky pozadí za skleněnou kartou zmatnit.
Upravte alfa kanál barvy pozadí, aby sklo dostalo jemný tmavý nádech nebo světlý matný vzhled.
Klikněte na export a zkopírujte produkční CSS úryvek přímo do schránky.
Rychlá odpověď: Glassmorphism je moderní trend uživatelského rozhraní charakterizovaný poloprůhlednými pozadími se silným background-blur (matné sklo), jemnými vícevrstvými stíny a tenkými okraji. Vytváří dojem svislé hloubky a hierarchie.
Glassmorphism, silně zakořeněný v macOS Big Sur, iOS a Windows 11 Fluent Design, se stal de facto standardem moderních prémiových webových aplikací.
Základní filozofie stojí na ose „Z“. Když je horní vrstva poloprůhledná a živé vrstvy pod ní silně rozostřené, návrháři vytvoří vizuální hierarchii bez tvrdých plných stínů. Uživatel má kontext, co se děje „za“ aktivním oknem.
Rychlá odpověď: CSS vlastnost backdrop-filter aplikuje grafické efekty, například rozostření nebo posun barev, na oblast hned za prvkem. Na rozdíl od standardního „filter“, který rozostří samotný prvek, backdrop-filter ovlivní jen to, co je vidět skrz průhledné pozadí.
Efekt glassmorphism vývojáři staví výhradně na pravidle backdrop-filter. Když prvku nastavíte poloprůhlednou barvu pozadí (např. background: rgba(255, 255, 255, 0.2);) a přidáte backdrop-filter: blur(10px);, vykreslovací engine prohlížeče vezme pixely přímo za prvkem, matematicky je rozostří a vykreslí je uvnitř prvku.
Protože prohlížeč musí pixely při scrollování neustále přepočítávat, jde o hardwarově akcelerovanou vlastnost. Generátor Utiliome tyto hardwarové metriky spočítá okamžitě, takže dopad na výkon vidíte v reálném čase.
Rychlá odpověď: Tailwind CSS nabízí vestavěné utility pro skleněné efekty. Kombinací „backdrop-blur-md“, „bg-white/30“ a tenkého „border-white/20“ vytvoříte matné sklo bez vlastního CSS.
Vlastní CSS je skvělé na učení, ale moderní vývojáři často dávají přednost utility frameworkům jako Tailwind.
Pro skleněnou kartu v Tailwind potřebujete tři vrstvy:
backdrop-blur-md nebo backdrop-blur-lg, abyste zmatnili pozadí.bg-white/20 (světlý režim) nebo bg-slate-900/40 (tmavý režim), aby sklo získalo fyzickou přítomnost.border border-white/20.Generátor Utiliome nabízí přepínač mezi standardním CSS a dokonale formátovaným řetězcem tříd Tailwind.
Rychlá odpověď: Safari historicky vyžadovalo prefix „-webkit-“ pro backdrop filtry. Pokud ho vynecháte, skleněný efekt na iOS a macOS úplně selže a zůstane plochý průhledný box.
Obří pastí junior vývojářů při glassmorphismu je zapomenout na hardware Apple. Zatímco Chrome a Firefox podporují standardní vlastnost backdrop-filter nativně, Safari (zejména starší iOS) striktně vyžaduje vendor prefix.
Pokud nepřidáte -webkit-backdrop-filter: blur(10px);, uživatelé Apple uvidí jen matoucí průhledný div a text na pozadí bude nečitelný.
Generátor CSS Utiliome automaticky vloží potřebné WebKit prefixy do výstupu, takže návrh vypadá stejně na všech hlavních operačních systémech.
Rychlá odpověď: Glassmorphism často selhává v přístupnosti, protože text na rozostřeném, živém pozadí nesplní kontrastní poměry WCAG. Musíte zajistit, aby barva textu byla dostatečně tmavá (nebo světlá) vůči průměrnému nádechu skla.
Nejčastější kritikou trendu glassmorphism je špatná přístupnost. Pokud se barevný obrázek pozadí za skleněnou kartou posune z tmavé modré na jasnou žlutou, bílý text může najednou zmizet.
Řešením je silný nádech pozadí (krytí). Používáte-li bílý text, zvolte barvu skla například rgba(0, 0, 0, 0.6). Pak bez ohledu na živý obrázek za sklem text vždy udrží minimální kontrast 4,5:1 vyžadovaný předpisy.
Rychlá odpověď: Matné sklo položené naplocho na povrchu nevypadá jako sklo. Musíte ho zvednout velmi jemným, širokým stínem (např. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)), aby se oddělilo od vrstvy pozadí.
Lidský mozek potřebuje světelné nápovědy k vnímání hloubky. Pouhé rozostření pozadí může UI nechat „ploché“.
Aby sklo vystoupilo, musíte ho zvednout na ose Z. Generátor Utiliome umožňuje doladit jemný box-shadow. Při velmi nízkém krytí stínu (kolem 10 %) a velkém poloměru rozostření (32 px) vznikne měkká ambient occlusion, která krásně oddělí sklo od živého pozadí pod ním.
Vše, co potřebujete vědět o používání bezplatného online Generátor glassmorphism CSS od Utiliome.
Safari vyžaduje prefix „-webkit-backdrop-filter“. Utiliome tento prefix automaticky vygeneruje v exportu CSS, aby byla zajištěna kompatibilita napříč prohlížeči.
Ano. Generátor Utiliome má přepínač, který vizuální návrh okamžitě přeloží do utility tříd Tailwind (např. backdrop-blur-md bg-white/30).
Ano, nadměrné silné rozostření velkých prvků může na slabších mobilech způsobit zpoždění, protože GPU musí při scrollování neustále přepočítávat pixely.
Skutečné sklo odráží světlo na okrajích. Přidejte 1px plný okraj s velmi nízkým krytím (například rgba(255, 255, 255, 0.2)), abyste tuto reflexi nasimulovali.
Ano, 100% zdarma bez limitů, reklam i nutnosti registrace.