Glassmorphism Generator

backdrop-filter: blur() är CSS-egenskapen bakom frostat glas-utseendet - en genomskinlig panel som suddar allt som rör sig bakom den istället för att bara bleka en platt färg. Haken är att oskärpa kvalitet är nästan omöjlig att bedöma mot en statisk färgruta; det läses bara som övertygande när något faktiskt rör sig under det, som det kommer att göra på en riktig sida med innehåll, video eller en animerad hjälte. Denna generator placerar förhandsgranskningskortet över en genuint animerad bakgrund istället för en stillbild, så det du ser när du drar reglagen är vad besökarna faktiskt kommer att uppleva.

Bakgrunden är en riktig CSS-animation: en stor linjär gradient målad i 400 % av elementets storlek, med @keyframes som flyttar dess bakgrundsposition fram och tillbaka på en loop — ingen JavaScript-animationsloop, ingen canvas, bara samma kontinuerliga bakgrundspositionsteknik som används i produktionshjältesektioner. Oskärpa, nyansfärg och opacitet, kantmarkeringsfärg/opacitet/bredd, hörnradie och skuggmjukhet driver alla det flytande kortets livestilar, och den kopierbara CSS-rutan speglar exakt samma värden.

Inte alla webbläsare stöder backdrop-filter, så generatorn avger också ett riktigt @supports not (backdrop-filter: blur(1px))-block — inte en symbolisk gest, utan en reservregel med sin egen bakgrundsfärg beräknad från din faktiska tonopacitet. Eftersom genomskinlighet utan oskärpa ser märkbart sämre ut (vad som ligger bakom det syns oskarpt), höjer reservfunktionen automatiskt alfakanalen över din valda tonopacitet, och en kommentar i den genererade CSS förklarar exakt varför och med hur mycket.

Allt beräknas och renderas i din egen webbläsare: ingen uppladdning, inget konto, ingen server tur och retur. Kopiera CSS när kortet ser rätt ut, släpp det på valfritt element du vill sitta ovanför ett foto, video eller gradient och behåll @supports-blocket så att äldre webbläsare fortfarande får ett läsbart, mer ogenomskinligt kort istället för ett knappt synligt.