Glassmorphism Generator
Indstil et matteret glaskort – sløring, farvetone, kantfremhævning, hjørneradius og skygge – vist svævende over en ægte animeret baggrund, så sløringskvaliteten er synlig i bevægelse.
🔒 Behandles helt i din browser - intet, du indtaster her, bliver nogensinde uploadet.
Resultat
backdrop-filter: blur() er CSS-egenskaben bag det matterede glaslook – et gennemskinneligt panel, der slører, hvad der end bevæger sig bagved, i stedet for blot at tone en flad farve. Udfordringen er, at sløringskvalitet er næsten umulig at bedømme mod en statisk farveprøve; den føles kun overbevisende, når noget faktisk bevæger sig under den, som det vil på en rigtig side med indhold, video eller en animeret hero. Denne generator placerer preview-kortet over en ægte animeret baggrund i stedet for en stillestående, så det, du ser, mens du trækker i skyderne, er det, dine besøgende rent faktisk vil opleve.
Baggrunden er en ægte CSS-animation: en stor linear-gradient malet ved 400% af elementets størrelse, med @keyframes der flytter dens background-position frem og tilbage i en løkke – ingen JavaScript-animationsløkke, intet canvas, blot den samme kontinuerlige background-position-teknik, der bruges i produktionens hero-sektioner. Sløring, farvetonefarve og opacitet, kantfremhævningsfarve/opacitet/bredde, hjørneradius og skyggeblødhed driver alle det flydende korts live-stile, og den kopierbare CSS-boks afspejler de nøjagtigt samme værdier.
Ikke alle browsere understøtter backdrop-filter, så generatoren udsender også en ægte @supports not (backdrop-filter: blur(1px))-blok – ikke en symbolsk gestus, men en fallback-regel med sin egen baggrundsfarve beregnet ud fra din faktiske farvetoneopacitet. Fordi gennemskinnelighed uden sløring ser markant værre ud (hvad der er bagved, skinner igennem usløret), hæver fallbacken automatisk alfakanalen over din valgte farvetoneopacitet, og en kommentar i den genererede CSS forklarer præcist hvorfor og med hvor meget.
Alt beregnes og vises i din egen browser: ingen upload, ingen konto, ingen serverhenvendelse. Kopiér CSS'en, når kortet ser rigtigt ud, sæt det på ethvert element, du ønsker skal sidde over et foto, en video eller en gradient, og behold @supports-blokken, så ældre browsere stadig får et læsbart, mere opakt kort i stedet for et næsten usynligt et.