Czym jest glassmorphism?

To styl wizualny, w którym półprzezroczysty panel rozmywa wszystko, co znajduje się za nim, jak matowe szkło, zwykle z cienkim jasnym obramowaniem i miękkim cieniem. W CSS łączy półprzezroczyste tło z backdrop-filter: blur().

Dlaczego mój szklany panel nie jest rozmyty?

backdrop-filter działa tylko na treść za elementem, więc element potrzebuje przezroczystego lub półprzezroczystego tła i czegoś widocznego pod spodem. W pełni nieprzezroczyste tło ukrywa efekt.

Które przeglądarki obsługują backdrop-filter?

Obsługują go aktualne wersje Chrome, Edge, Firefox i Safari. Wersje Safari starsze niż 18 wymagają prefiksu -webkit-, który eksportowany CSS zawiera.

Generator efektu glassmorphism

Twórz panele z efektem matowego szkła za pomocą backdrop-filter. Dostosuj rozmycie, przezroczystość, nasycenie i obramowanie na żywym tle, a potem skopiuj CSS.

Podgląd na żywo

Matowe szkło

Tekst na szkle potrzebuje wystarczającego kontrastu z każdym fragmentem tła.

Tło służy tylko do podglądu i nie jest eksportowane.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Wszystko pozostaje w Twojej przeglądarce.

Źródła

MDN — backdrop-filter
W3C — WCAG 2.2 contrast (minimum)

Aktualizacja strony: 2026-10-25

Podgląd na żywo

Instrukcja i przykład

Powiązane narzędzia

Źródła