⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

Glassmorphism Generator

Slå inn et frostet glass-kort – uskarphet, fargetone, kanthøydepunkt, hjørneradius og skygge – forhåndsvist flytende over en genuint animert bakgrunn slik at uskarphet er synlig i bevegelse.

12px
20px
20
40
1px
30px

Frostet glass kort

Dette kortet flyter over en bakgrunn som beveger seg kontinuerlig, slik at du kan bedømme uskarphet i bevegelse, ikke mot en flat fargeprøve.

Behandler... 0%

Resultat

backdrop-filter: blur() er CSS-egenskapen bak frostet glass-utseendet - et gjennomskinnelig panel som uskarp alt som beveger seg bak det, i stedet for bare å falme en flat farge. Haken er at uskarphet er nesten umulig å bedømme mot en statisk fargeprøve; det er bare overbevisende når noe faktisk beveger seg under det, slik det vil gjøre på en ekte side med innhold, video eller en animert helt. Denne generatoren setter forhåndsvisningskortet over en genuint animert bakgrunn i stedet for en stillbilde, så det du ser mens du drar glidebryterne er det besøkende faktisk vil oppleve.

Bakgrunnen er en ekte CSS-animasjon: en stor lineær gradient malt i 400 % av elementets størrelse, med @keyframes som skifter bakgrunnsposisjonen frem og tilbake på en løkke – ingen JavaScript-animasjonsløkke, ingen lerret, bare den samme kontinuerlige bakgrunnsposisjonsteknikken som brukes i produksjonsheltseksjoner. Uskarphet, nyansefarge og opasitet, kantmarkeringsfarge/opasitet/bredde, hjørneradius og skyggemykhet driver alle flytekortets live-stiler, og den kopierbare CSS-boksen gjenspeiler nøyaktig de samme verdiene.

Ikke alle nettlesere støtter backdrop-filter, så generatoren sender også ut en ekte @supports not (backdrop-filter: blur(1px))-blokk – ikke en symbolbevegelse, men en reserveregel med sin egen bakgrunnsfarge beregnet ut fra din faktiske tintopasitet. Fordi gjennomskinnelighet uten uskarphet ser merkbart dårligere ut (det som ligger bak vises uskarpt), hever tilbakefallet automatisk alfakanalen over den valgte fargeopasiteten, 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 server rundtur. Kopier CSS-en når kortet ser riktig ut, slipp det på ethvert element du vil ha over et bilde, 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.

🛡️
Utført i nettleser

Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.

Godkjente formater og regler

  • Kontroller for uskarphet, nyansefarge/opasitet, kantmarkeringsfarge/opasitet/bredde, hjørneradius og skyggemykhet, alt live.
  • En animert CSS-gradientbakgrunn bak kortet via en ekte @keyframes bakgrunnsposisjonsløkke, slik at frostet uskarphet er synlig mot ekte bevegelse.
  • Kopierbar CSS inkludert en ekte @supports not (backdrop-filter) reserveblokk med automatisk høyere opasitet, kommentert og forklart.

Viktige fordeler

✓ Forhåndsvisningskortet flyter over en kontinuerlig bevegelig gradientbakgrunn, slik at du bedømmer uskarpheten slik besøkende faktisk vil gjøre det – i bevegelse, ikke mot en flat fargeprøve.
✓ Utdataene leverer en ekte @supports not (bakgrunnsfilter) fallback med opasiteten beregnet fra din egen fargeinnstilling, ikke en fast gjetning.
✓ Hver kontroll – uskarphet, fargetone, kantmarkering, radius, skyggemykhet – oppdaterer live-kortet og den kopierbare CSS-en ved hvert dra.

Brukssaker

  • • Design en frostet navbar eller modalt overlegg, og bedøm uskarphet mot en bevegelig bakgrunn i stedet for en flat fargeprøve.
  • • Slå inn en subtil kanthøydepunkt og skyggemykhet for et priskort, og kopier deretter CSS som allerede inkluderer en grasiøs reserve for eldre nettlesere.
  • • Sjekk hvor mye opasiteten til en fargetone må øke i @supports-reserven før du sender en helteseksjon med frostet glass.