Generator glassmorfizmu

backdrop-filter: rozmycie() to właściwość CSS odpowiedzialna za wygląd matowego szkła — półprzezroczysty panel, który rozmywa wszystko, co się za nim porusza, a nie tylko blaknie płaski kolor. Problem w tym, że jakość rozmycia jest prawie niemożliwa do oceny na podstawie statycznej próbki; brzmi to przekonująco tylko wtedy, gdy coś się pod nim faktycznie porusza, tak jak na prawdziwej stronie z treścią, wideo lub animowanym bohaterem. Ten generator umieszcza kartę podglądu na prawdziwie animowanym tle, a nie na nieruchomym, więc to, co zobaczysz podczas przeciągania suwaków, będzie tym, czego faktycznie doświadczą odwiedzający.

Tło to prawdziwa animacja CSS: duży gradient liniowy namalowany na 400% rozmiaru elementu, z @keyframes przesuwającymi położenie tła w przód i w tył w pętli — bez pętli animacji JavaScript, bez płótna, po prostu ta sama technika ciągłego ustawiania tła stosowana w sekcjach bohaterów produkcyjnych. Rozmycie, odcień i krycie, kolor/krycie/szerokość podświetlenia obramowania, promień narożnika i miękkość cieni wpływają na żywe style pływającej karty, a kopiowalne pole CSS odzwierciedla dokładnie te same wartości.

Nie każda przeglądarka obsługuje filtr tła, więc generator emituje również prawdziwy blok @supports not (backdrop-filter: rozmycie(1px)) — nie gest tokenowy, ale regułę zastępczą z własnym kolorem tła obliczonym na podstawie rzeczywistego krycia odcienia. Ponieważ przezroczystość bez rozmycia wygląda zauważalnie gorzej (cokolwiek jest za nią, widać przez niezamazanie), opcja rezerwowa automatycznie podnosi kanał alfa powyżej wybranego krycia odcienia, a komentarz w wygenerowanym CSS wyjaśnia dokładnie dlaczego i o ile.

Wszystko jest obliczane i renderowane w Twojej przeglądarce: bez przesyłania, bez konta, bez konieczności przełączania serwera w obie strony. Skopiuj kod CSS, gdy karta będzie wyglądać prawidłowo, upuść go na dowolny element, który chcesz umieścić nad zdjęciem, filmem lub gradientem, i zachowaj blok @supports, aby starsze przeglądarki nadal otrzymywały czytelną, bardziej nieprzejrzystą kartę zamiast ledwo widocznej.