Generator glassmorphism
Twórz karty UI z efektem matowego szkła, rozmyciem tła, przezroczystością i obramowaniem, a następnie kopiuj CSS.
Szklana karta
Matowe szkło unoszące się nad żywym tłem.
—
Generuje zarówno backdrop-filter, jak i -webkit-backdrop-filter. Uwaga: backdrop-filter nie jest obsługiwany w starszych przeglądarkach (np. Firefox poniżej 103); dodaj jednolite tło zapasowe dla takich przypadków.
O Generator glassmorphism
Glassmorphism Generator tworzy efekt matowej szklanej karty: półprzezroczysty panel, który rozmywa wszystko, co znajduje się za nim. Suwaki kontrolują rozmycie i nasycenie backdrop-filter, kolor i przezroczystość szklanej poświaty, kolor i przezroczystość obramowania, promień zaokrąglenia rogów oraz cień zewnętrzny — każda zmiana jest renderowana na żywo na tle wyrazistego obrazu, dzięki czemu możesz realistycznie ocenić efekt.
Cztery gotowe presety jakości — subtle, frosted, vivid i dark glass — dają sprawdzone kombinacje jako punkt wyjścia. Preset dark pokazuje, jak ta sama receptura sprawdza się w ciemnych interfejsach, gdzie delikatna jasna obwódka wykonuje większość pracy w oddzieleniu szkła od tła.
Wygenerowany CSS zawiera zarówno backdrop-filter, jak i prefiks -webkit-backdrop-filter wymagany przez Safari. Uwaga na zastrzeżenie dotyczące kompatybilności: starsze przeglądarki (na przykład Firefox przed wersją 103) nie obsługują backdrop-filter, więc zapewnij dla nich stałe tło zapasowe.
Jak korzystać z Generator glassmorphism
- Zacznij od presetu — subtle, frosted, vivid lub dark glass — albo od ustawień domyślnych.
- Dostosuj rozmycie i nasycenie filtra tła.
- Ustaw kolor poświaty szkła i jego przezroczystość.
- Dostrój kolor obramowania, jego przezroczystość, promień zaokrąglenia rogów i cień konturu.
- Skopiuj CSS — zawiera już właściwość z prefiksem -webkit- dla Safari.