Generator glassmorphism efekta

backdrop-filter: blur() CSS je svojstvo koje stoji iza efekta mat stakla — prozirni panel koji zamućuje sve što se kreće iza njega umjesto da samo blijedi ravnom bojom. Kvaka je u tome što je kvalitetu zamućenja gotovo nemoguće procijeniti na statičnom uzorku; djeluje uvjerljivo tek kad se nešto stvarno pomiče ispod njega, onako kako će biti na pravoj stranici sa sadržajem, videom ili animiranim hero dijelom. Ovaj generator postavlja karticu za pregled iznad istinski animirane pozadine umjesto statične, tako da ono što vidite dok povlačite klizače odgovara onome što će posjetitelji doista iskusiti.

Pozadina je prava CSS animacija: veliki linear-gradient postavljen na 400% veličine elementa, s @keyframes koji pomiču background-position naprijed-nazad u petlji — bez JavaScript animacijske petlje, bez canvasa, samo ista tehnika kontinuiranog background-positiona koja se koristi u produkcijskim hero sekcijama. Zamućenje, boja i prozirnost, boja/prozirnost/širina svjetlosnog ruba, radijus kuta i mekoća sjene upravljaju stilovima lebdeće kartice uživo, a CSS okvir za kopiranje preslikava iste vrijednosti.

Ne podržava svaki preglednik backdrop-filter, pa generator također isporučuje pravi @supports not (backdrop-filter: blur(1px)) blok — ne simboličnu gestu, već fallback pravilo s vlastitom bojom pozadine izračunatom iz vaše stvarne prozirnosti boje. Budući da prozirnost bez zamućenja izgleda osjetno lošije (sve što je iza nje vidi se nezamućeno), fallback automatski podiže alpha kanal iznad odabrane prozirnosti boje, a komentar u generiranom CSS-u objašnjava točno zašto i za koliko.

Sve se obrađuje i prikazuje u vašem pregledniku: nema prijenosa, nema računa, nema povratnog putovanja na poslužitelj. Kopirajte CSS kad kartica izgleda dobro, dodajte je na bilo koji element koji želite postaviti iznad fotografije, videa ili gradijenta i zadržite @supports blok kako bi stariji preglednici i dalje dobili čitljivu, neprozirniju karticu umjesto jedva vidljive.