⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

Glassmorphism Generator

Indtast et matteret glaskort - sløring, farvetone, kantfremhævelse, hjørneradius og skygge - forhåndsvist svævende over en ægte animeret baggrund, så sløringskvaliteten er synlig i bevægelse.

12px
20px
20
40
1px
30px

matteret glas kort

Dette kort flyder over en baggrund i bevægelse, så du kan bedømme sløringen i bevægelse, ikke mod en flad farveprøve.

Behandler... 0%

Resultat

backdrop-filter: blur() er CSS-egenskaben bag det matterede glas-look - et gennemsigtigt panel, der slører alt, hvad der bevæger sig bag det, i stedet for blot at falme en flad farve. Fangsten er, at sløringskvaliteten er næsten umulig at bedømme ud fra en statisk farveprøve; det er kun overbevisende, når noget rent faktisk bevæger sig under det, sådan som det vil på en rigtig side med indhold, video eller en animeret helt. Denne generator sætter forhåndsvisningskortet over en ægte animeret baggrund i stedet for en stillestående, så det, du ser, mens du trækker skyderne, er det, som besøgende rent faktisk vil opleve.

Baggrunden er en ægte CSS-animation: en stor lineær gradient malet ved 400 % af elementets størrelse, med @keyframes, der flytter dens baggrundsposition frem og tilbage på en loop – ingen JavaScript-animationsløkke, intet lærred, bare den samme kontinuerlige baggrundspositionsteknik, der bruges i produktionshelte-sektioner. Sløring, nuancefarve og uigennemsigtighed, kantfremhævningsfarve/opacitet/bredde, hjørneradius og skyggeblødhed driver alle det flydende korts live-stile, og den kopierbare CSS-boks afspejler nøjagtig de 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 nuanceopacitet. Fordi gennemskinnelighed uden sløring ser mærkbart værre ud (hvad der end er bagved, vises uskarpt), hæver tilbagefaldet automatisk alfakanalen over din valgte farveopacitet, og en kommentar i den genererede CSS forklarer præcis hvorfor og med hvor meget.

Alt beregnes og gengives i din egen browser: ingen upload, ingen konto, ingen server rundtur. Kopier CSS'en, når kortet ser rigtigt ud, slip det på ethvert element, du vil sidde over et billede, video eller gradient, og behold @supports-blokken, så ældre browsere stadig får et læsbart, mere uigennemsigtigt kort i stedet for et knap synligt.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Sløring, nuancefarve/opacitet, kantfremhævningsfarve/opacitet/bredde, hjørneradius og skyggeblødhed, alt sammen live.
  • En animeret CSS-gradient-baggrund bag kortet via en ægte @keyframes-baggrundspositionsløkke, så frostet sløring er synlig mod ægte bevægelse.
  • Kopierbar CSS inklusive en ægte @supports not (backdrop-filter) fallback blok med en automatisk højere opacitet, kommenteret og forklaret.

Vigtige fordele

✓ Forhåndsvisningskortet flyder over en kontinuerligt bevægende gradientbaggrund, så du bedømmer sløringen, som besøgende faktisk vil - i bevægelse, ikke mod en flad farveprøve.
✓ Outputtet sender et ægte @supports not (backdrop-filter) fallback med dets opacitet beregnet ud fra din egen farveindstilling, ikke et fast gæt.
✓ Hver kontrol - sløring, farvetone, kantfremhævelse, radius, skyggeblødhed - opdaterer live-kortet og den kopierbare CSS ved hvert træk.

Brug Cases

  • • Design en frostet navbar eller modal overlay, og bedøm sløringskvaliteten mod en bevægelig baggrund i stedet for en flad farveprøve.
  • • Indtast en subtil kantfremhævelse og skyggeblødhed for at få et priskort, og kopier derefter CSS, der allerede indeholder en yndefuld reserve til ældre browsere.
  • • Tjek, hvor meget en farvetones uigennemsigtighed skal stige i @supports fallback, før du sender en heltesektion af matglas.