Glassmorphism-generator
Ställ in ett frostat glaskort – suddighet, toning, kantmarkering, hörnradie och skugga – förhandsvisat över en genuint animerad bakgrund så att suddighetskvaliteten syns i rörelse.
🔒 Bearbetas helt i din webbläsare – ingenting du anger här laddas någonsin upp.
Resultat
backdrop-filter: blur() är CSS-egenskapen bakom utseendet av frostat glas – en genomskinlig panel som suddar ut det som rör sig bakom den istället för att bara tona en platt färg. Haken är att suddighetskvaliteten är nästan omöjlig att bedöma mot en statisk färgruta; den upplevs bara övertygande när något verkligen rör sig under den, precis som på en riktig sida med innehåll, video eller en animerad hero-bild. Den här generatorn placerar förhandsvisningskortet över en genuint animerad bakgrund istället för en stillbild, så att det du ser medan du drar i reglagen är vad besökarna faktiskt kommer att uppleva.
Bakgrunden är en äkta CSS-animation: en stor linear-gradient målad i 400% av elementets storlek, med @keyframes som förflyttar dess background-position fram och tillbaka i en loop – ingen JavaScript-animationsloop, ingen canvas, bara samma kontinuerliga bakgrundspositioneringsteknik som används i produktions-hero-sektioner. Suddighet, toningsfärg och opacitet, kantmarkeringens färg/opacitet/bredd, hörnradie och skuggmjukhet styr alla det svävande kortets live-stilar, och den kopieringsbara CSS-rutan speglar exakt samma värden.
Alla webbläsare stöder inte backdrop-filter, så generatorn skapar också ett äkta @supports not (backdrop-filter: blur(1px))-block – inte en symbolisk gest, utan en fallback-regel med en egen bakgrundsfärg beräknad från din faktiska toningsopacitet. Eftersom genomskinlighet utan suddighet ser märkbart sämre ut (det som finns bakom syns igenom osuddigt), höjer fallbacken automatiskt alfakanalen över din valda toningsopacitet, och en kommentar i den genererade CSS-koden förklarar exakt varför och med hur mycket.
Allt beräknas och renderas i din egen webbläsare: ingen uppladdning, inget konto, ingen serverkommunikation. Kopiera CSS-koden när kortet ser rätt ut, placera den på vilket element du vill ska ligga ovanpå ett foto, en video eller gradient, och behåll @supports-blocket så att äldre webbläsare fortfarande får ett läsbart, mer opakt kort istället för ett knappt synligt.