Generator Glassmorphismu

backdrop-filter: blur() to właściwość CSS odpowiadająca za wygląd matowego szkła – półprzezroczysty panel rozmywający wszystko, co porusza się za nim, zamiast jedynie nakładać płaski kolor. Trudność polega na tym, że jakość rozmycia jest prawie niemożliwa do oceny na statycznym wzorniku; staje się przekonująca dopiero wtedy, gdy coś za nią faktycznie się porusza, tak jak będzie to miało miejsce na prawdziwej stronie z treścią, wideo czy animowanym hero. Ten generator umieszcza podgląd karty na autentycznie animowanym tle, a nie na statycznym obrazku, więc to, co widzisz, przeciągając suwaki, jest tym, czego naprawdę doświadczą odwiedzający.

Tło to prawdziwa animacja CSS: duży gradient liniowy namalowany na 400% rozmiaru elementu, z @keyframes przesuwającymi jego pozycję tła w tę i z powrotem w pętli – bez pętli animacji w JavaScripcie, bez canvasu, po prostu ta sama technika ciągłej zmiany pozycji tła, stosowana w produkcyjnych sekcjach hero. Rozmycie, kolor i krycie barwy, kolor, krycie i szerokość podświetlenia krawędzi, promień zaokrąglenia i miękkość cienia sterują na żywo stylami unoszącej się karty, a pole z kopiowalnym CSS odzwierciedla dokładnie te same wartości.

Nie każda przeglądarka obsługuje backdrop-filter, dlatego generator dodaje również prawdziwy blok @supports not (backdrop-filter: blur(1px)) – nie symboliczny gest, ale regułę fallbacku z własnym kolorem tła wyliczonym na podstawie rzeczywistej przezroczystości Twojej barwy. Ponieważ przezierność bez rozmycia wygląda zauważalnie gorzej (to, co jest za nią, prześwituje nierozmyte), fallback automatycznie podnosi kanał alfa powyżej wybranej przez Ciebie wartości krycia barwy, a komentarz w wygenerowanym CSS dokładnie wyjaśnia dlaczego i o ile.

Wszystko jest obliczane i renderowane w Twojej własnej przeglądarce: bez wysyłania, bez konta, bez komunikacji z serwerem. Gdy karta będzie wyglądać dobrze, skopiuj CSS, wstaw go do dowolnego elementu, który ma się znaleźć nad zdjęciem, wideo czy gradientem, i zachowaj blok @supports, aby starsze przeglądarki wciąż otrzymywały czytelną, bardziej kryjącą kartę zamiast ledwo widocznej.