W tym artykule
Czym jest Glassmorphism i dlaczego działa
Glassmorphism to trend w projektowaniu interfejsów oparty na powierzchniach z matowego szkła, które rozmywają tło za nimi. Efekt tworzy poczucie głębi i hierarchii poprzez nakładanie półprzezroczystych paneli na kolorowe tła, nadając interfejsom nowoczesny i dopracowany wygląd. Apple spopularyzowało tę estetykę w macOS i iOS, a od tego czasu stała się ona stałym elementem projektów dashboardów, układów kart i nakładek modalnych w całej sieci.
CSS stojący za efektem glassmorphism łączy półprzezroczysty kolor tła z rozmyciem backdrop-filter i subtelną ramką symulującą krawędź szkła. Uzyskanie właściwej równowagi między przezroczystością, promieniem rozmycia a przezroczystością ramki wymaga eksperymentowania. Wizualny generator pozwala dostosowywać te właściwości w czasie rzeczywistym i skopiować dokładny CSS, gdy efekt wygląda prawidłowo, eliminując metodę prób i błędów ręcznego kodowania wartości.
Jak korzystać z generatora CSS Glassmorphism
Generator CheckTown zapewnia interaktywne kontrolki dla każdej właściwości efektu szkła, dzięki czemu możesz wizualnie zaprojektować idealny panel.
- Dostosuj suwak promienia rozmycia, aby kontrolować intensywność rozmycia tła — wyższe wartości tworzą bardziej matowy wygląd, a niższe pozwalają częściowo widzieć tło
- Ustaw przezroczystość tła za pomocą suwaka przezroczystości — określa on, jak dużo koloru tła prześwituje przez powierzchnię szkła
- Dostosuj przezroczystość i nasycenie ramki, aby dodać subtelną krawędź szkła, która łapie światło i oddziela panel od tła
- Skopiuj wygenerowany CSS jednym kliknięciem i wklej go bezpośrednio do arkusza stylów — wynik zawiera właściwość backdrop-filter z prefiksami dostawców dla maksymalnej kompatybilności z przeglądarkami
Wypróbuj za darmo — bez rejestracji
Otwórz generator Glassmorphism →Wskazówki projektowe dotyczące używania efektów szkła
Glassmorphism wygląda oszałamiająco, gdy jest stosowany z rozwagą, ale kilka zasad zapobiega negatywnemu wpływowi na czytelność i dostępność.
- Zapewnij wystarczający kontrast między tekstem a powierzchnią szkła — rozmyte tło może utrudniać czytanie jasnego tekstu, jeśli przezroczystość jest zbyt wysoka. Testuj za pomocą narzędzi do sprawdzania kontrastu WCAG.
- Stosuj glassmorphism oszczędnie — jeden lub dwa szklane panele na ekran tworzą elegancki punkt skupienia. Zastosowanie efektu do każdego elementu sprawia, że interfejs wygląda na zagracony i działa wolno.
- Zapewnij zapasowy kolor stały dla przeglądarek nieobsługujących backdrop-filter — starsze przeglądarki pokażą w pełni przezroczysty panel bez rozmycia, co może uczynić treść nieczytelną bez zapasowego tła
Najczesciej zadawane pytania
Które przeglądarki obsługują backdrop-filter?
Backdrop-filter jest obsługiwany we wszystkich nowoczesnych przeglądarkach, w tym Chrome, Firefox, Safari i Edge. Wygenerowany CSS zawiera prefiks -webkit- dla kompatybilności z Safari. Internet Explorer nie obsługuje tej właściwości, ale jego globalny udział w rynku jest znikomy.
Czy glassmorphism wpływa na wydajność?
Właściwość backdrop-filter uruchamia kompozytowanie GPU, co może wpływać na wydajność na słabszych urządzeniach lub gdy jest stosowana do wielu elementów jednocześnie. Aby uzyskać najlepsze rezultaty, ogranicz efekty szkła do kilku kluczowych elementów interfejsu, takich jak paski nawigacyjne, okna modalne lub karty hero, zamiast stosować je do każdego komponentu na stronie.
Czy mogę używać glassmorphism w trybie ciemnym?
Oczywiście. Glassmorphism sprawdza się zarówno w jasnych, jak i ciemnych motywach. W trybie ciemnym użyj ciemniejszego, półprzezroczystego koloru tła i nieznacznie zwiększ promień rozmycia, aby zachować efekt matowego szkła. Generator pozwala podglądać wynik na dowolnym kolorze tła, dzięki czemu możesz dopracować wygląd dla obu motywów.