CodeKitHubCzym jest to narzędzie?
Glassmorphizm to styl interfejsu, w którym element wygląda jak matowe szkło: półprzezroczyste tło pozwala prześwitywać kolorom znajdującym się za nim, a backdrop-filter: blur() rozmywa to tło, dzięki czemu wygląda ono jak szkło, a nie jak zwykły przezroczysty panel. Cienka, półprzezroczysta ramka i zaokrąglone rogi zwykle dopełniają ten efekt.
To narzędzie pozwala zbudować ten efekt wizualnie. Podgląd znajduje się nad ruchomym gradientowym tłem właśnie po to, aby rozmycie było widoczne — glassmorphizm dobrze wygląda tylko na tle z kolorem lub detalami, a nie na płaskiej białej stronie. Dostosuj krycie koloru tła, siłę rozmycia, krycie obramowania i promień zaokrąglenia rogów, a następnie skopiuj wygenerowany kod CSS.
Źródło: Filter Effects Module Level 1, W3C — definiuje backdrop-filter, właściwość, na której oparty jest ten efekt.
Dlaczego warto go używać?
- Podgląd na żywo na kolorowym, animowanym tle, dzięki czemu naprawdę widzisz efekt matowego szkła zamiast zgadywać wartości rozmycia na pustym tle.
- Pełna kontrola nad kryciem tła, siłą rozmycia tła, kryciem obramowania i promieniem zaokrąglenia w jednym miejscu.
- Automatycznie generuje zarówno backdrop-filter, jak i prefiks -webkit-backdrop-filter, więc nie zapomnisz o obsłudze Safari.
- Działa całkowicie w przeglądarce — żadne wprowadzone przez Ciebie ustawienia nie są nigdzie przesyłane.
- Bezpłatne, bez rejestracji, działa na urządzeniach mobilnych.
Jak używać
- Wybierz kolor tła i dostosuj jego krycie — niższe krycie (10–25%) wygląda jak szkło; wyższe przypomina bardziej jednolity, barwiony panel.
- Zwiększ siłę rozmycia, aby rozmyć to, co znajduje się za elementem — to właśnie tworzy efekt matowego szkła, w odróżnieniu od samej przezroczystości.
- Dostosuj krycie obramowania, aby dodać subtelną jasną krawędź, która pomaga szklanej karcie odróżnić się od tła zamiast się w nie wtapiać.
- Ustaw promień zaokrąglenia rogów — karty w stylu glassmorphizmu niemal zawsze mają zaokrąglone, a nie ostre rogi.
- Skopiuj wygenerowany kod CSS i wklej go do arkusza stylów. Pamiętaj, że element musi mieć za sobą coś z kolorem lub teksturą — glassmorphizm jest niewidoczny na płaskim, jednolitym tle.
Przykład
Wejście
Tło: biały przy 20% krycia · Rozmycie: 10px · Krycie obramowania: 30% · Promień: 16pxWynik
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;Klasyczny styl karty z matowego szkła, wykorzystywany w panelach logowania, paskach nawigacji i widżetach panelu na kolorowym lub zdjęciowym tle.
Obsługa Safari i przeglądarek
backdrop-filter jest obsługiwane w aktualnych wersjach Chrome, Firefox, Edge i Safari, jednak Safari historycznie wymagało prefiksu -webkit-backdrop-filter obok właściwości bez prefiksu, aby wyrenderować rozmycie — bez niego starsze wersje Safari po cichu pomijały rozmycie i pokazywały tylko płaskie, przezroczyste tło. Z tego powodu to narzędzie zawsze generuje obie deklaracje.
Szczegóły dotyczące aktualnej kompatybilności przeglądarek znajdziesz w dokumentacji backdrop-filter na MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.
Dlaczego glassmorphizm potrzebuje czegoś za sobą
backdrop-filter rozmywa jedynie to, co znajduje się wizualnie za elementem — obraz tła, gradient, inny kolorowy element lub treść przewijaną pod spodem. Na płaskim białym lub jednokolorowym tle nie ma nic do rozmycia, więc efekt jest niewidoczny, a element wygląda po prostu jak lekko zabarwiony, zaokrąglony prostokąt. Zawsze umieszczaj elementy w stylu glassmorphizmu na gradiencie, zdjęciu lub innym bogatym w detale tle, aby efekt był widoczny.
Łączenie z innymi efektami CSS
Karty w stylu glassmorphizmu często łączy się z subtelnym cieniem (box-shadow) pod spodem, aby dodać głębi. Wygeneruj tutaj kod CSS matowego szkła, a następnie dodaj delikatny cień za pomocą generatora cieni ramki i zastosuj obie deklaracje na tym samym elemencie.
Najczęściej zadawane pytania
Dlaczego efekt szkła nie pojawia się na mojej stronie?
backdrop-filter rozmywa to, co znajduje się za elementem. Jeśli Twój element leży na płaskim białym lub jednokolorowym tle, nie ma nic ciekawego wizualnie do rozmycia, więc wygląda po prostu jak delikatnie zabarwiony prostokąt. Umieść go na gradiencie, zdjęciu lub innym bogatym w szczegóły tle, aby efekt matowego szkła był widoczny.
Czy potrzebuję prefiksu -webkit-backdrop-filter?
Tak, jeśli chcesz, aby efekt niezawodnie wyświetlał się w Safari. To narzędzie zawsze generuje razem standardowy backdrop-filter i wersję z prefiksem -webkit-, ponieważ Safari historycznie wymagało tego prefiksu, aby zastosować rozmycie.
Jaka jest różnica między kryciem tła a rozmyciem?
Krycie tła kontroluje, ile z wybranego koloru odcienia jest widoczne, a ile z tego, co znajduje się za nim, prześwituje w niezmienionej formie. Rozmycie kontroluje, jak bardzo to widoczne tło jest rozmazane/zmiękczone. Glassmorphizm wykorzystuje oba efekty razem — pewną przezroczystość i pewne rozmycie — zamiast polegać tylko na jednym z nich.
Czy mogę zastosować backdrop-filter na dowolnym elemencie?
Tak, ale wpływa on tylko na to, co znajduje się wizualnie za tym elementem w renderowaniu strony, a nie na jego własne elementy potomne. Ma również pewien koszt wydajnościowy na niektórych urządzeniach, gdy jest stosowany do wielu elementów lub często animowany, dlatego najlepiej używać go w niewielkiej liczbie ważnych powierzchni interfejsu, takich jak karty, okna modalne czy paski nawigacji, a nie na dziesiątkach małych elementów.
Dlaczego moje obramowanie jest ledwo widoczne?
Obramowanie w tym narzędziu wykorzystuje półprzezroczystą biel, która ma być subtelna — jasna krawędź pomagająca szklanemu panelowi odróżnić się od otoczenia, bez wyglądu twardego, nieprzezroczystego konturu. Zwiększ suwak krycia obramowania, jeśli chcesz uzyskać bardziej widoczną krawędź.