Glassmorphism-generator
Still inn et frostet glass-kort – uskarphet, fargetone, kantutheving, hjørneradius og skygge – forhåndsvist svevende over en ekte animert bakgrunn slik at uskarpheten er synlig i bevegelse.
🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.
Resultat
backdrop-filter: blur() er CSS-egenskapen bak frostet glass-utseendet – et gjennomskinnelig panel som gjør alt som beveger seg bak det uskarpt, i stedet for å bare tone ut en flat farge. Ulempen er at uskarpheten er nesten umulig å bedømme mot en statisk fargeprøve; den ser bare overbevisende ut når noe faktisk beveger seg under, slik det vil på en ekte side med innhold, video eller en animert hero. Denne generatoren plasserer forhåndsvisningskortet over en ekte animert bakgrunn i stedet for en stillestående, slik at det du ser mens du drar i glidebryterne, er det besøkende faktisk vil oppleve.
Bakgrunnen er en ekte CSS-animasjon: en stor linear-gradient malt med 400 % av elementets størrelse, med @keyframes som skifter background-position frem og tilbake i en løkke – ingen JavaScript-animasjonsløkke, intet canvas, bare den samme kontinuerlige background-position-teknikken som brukes i produksjonsklare hero-seksjoner. Uskarphet, fargetone og opasitet, kantutheving farge/opasitet/bredde, hjørneradius og skyggemykhet styrer alle det svevende kortets levende stil, og den kopierbare CSS-boksen gjenspeiler nøyaktig de samme verdiene.
Ikke alle nettlesere støtter backdrop-filter, så generatoren produserer også en ekte @supports not (backdrop-filter: blur(1px))-blokk – ikke et symbolsk tiltak, men en fallback-regel med sin egen bakgrunnsfarge beregnet fra den faktiske fargetoneopasiteten din. Fordi gjennomsiktighet uten uskarphet ser merkbart verre ut (det som er bak vises uklart), øker fallback-en automatisk alfakanalen over den valgte fargetoneopasiteten, og en kommentar i den genererte CSS-en forklarer nøyaktig hvorfor og med hvor mye.
Alt beregnes og gjengis i din egen nettleser: ingen opplasting, ingen konto, ingen rundtur til server. Kopier CSS-en når kortet ser riktig ut, slipp det på ethvert element du vil plassere over et bilde, en video eller gradient, og behold @supports-blokken slik at eldre nettlesere fortsatt får et lesbart, mer ugjennomsiktig kort i stedet for et knapt synlig et.