Generator glassmorphism
Twórz CSS kart z efektem szkła mrożonego, z regulacją rozmycia, przezroczystości, odcienia, obramowania i promienia – prosto w przeglądarce.
🔒 Działa całkowicie w Twojej przeglądarce — nic nie jest przesyłaneStwórz powierzchnię z mrożonego szkła
Glassmorphism polega na tym, że tło prześwituje przez półprzezroczystą powierzchnię, a rozmycie zmiękcza to, co znajduje się za nią. Efekt może wyglądać elegancko i nowocześnie, jeśli stosuje się go z umiarem. Ten generator glassmorphism daje Ci bezpośrednią kontrolę nad najważniejszymi elementami: odcieniem, przezroczystością, rozmyciem tła, krycia obramowania, promieniem i cieniem. Podczas zmiany wartości karta aktualizuje się na kolorowym gradiencie, dzięki czemu możesz ocenić, czy efekt szkła jest widoczny, nie utrudniając czytania treści.
Wygenerowany CSS zawiera background, backdrop-filter, odpowiednią właściwość z prefiksem
WebKit, subtelne obramowanie, promień zaokrąglenia i cień. Te deklaracje wystarczą do wielokrotnego użytku: dla karty, panelu nawigacji, okna modalnego, nakładki hero lub widżetu pulpitu. Ponieważ efekt to czysty
CSS, nie ma obrazów do eksportu ani przetwarzania na serwerze. Przeglądarka renderuje podgląd, a
przycisk kopiowania zapisuje tekst CSS w schowku.
Równowaga między przezroczystością a czytelnością
Najczęstszy błąd w glassmorphism to zbyt przezroczysta karta. Niska nieprzezroczystość może wyglądać imponująco na pustym podglądzie, ale prawdziwe nagłówki, etykiety i ikony potrzebują odpowiedniego kontrastu, by pozostać czytelne na każdym tle. Zwiększ nieprzezroczystość, gdy tło jest złożone, zmniejsz ją, gdy tło jest proste, i użyj obramowania, by oddzielić powierzchnię od podobnych kolorów. Rozmycie pomaga zredukować szczegóły za kartą, ale nie zastępuje testów kontrastu.
Gdzie stosować ten efekt
Mrożone szkło najlepiej sprawdza się w wyróżnionych miejscach: karta cennika nad gradientem hero, pływający pasek narzędzi, podsumowanie profilu albo okno modalne nad bogatą grafiką. Staje się rozpraszające, gdy każdy komponent używa go jednocześnie. Po skopiowaniu CSS przetestuj go w prawdziwym układzie i dodaj pełne tło zapasowe, jeśli obsługujesz starsze przeglądarki lub bardzo słabe urządzenia. Dobra szklana karta powinna sprawiać wrażenie warstwowej, jednocześnie zachowując czytelną hierarchię interfejsu i treści.
Jak używać
- Wybierz kolor szkłaWybierz odcień nakładany na tło.
- Dostrój rozmycie i krycieDostosuj przezroczystość, rozmycie tła, intensywność obramowania i promień.
- Skopiuj CSSWklej wygenerowane style szklanej karty do swojego komponentu.