Co to jest glassmorphism i jak go zrobić w CSS?
Glassmorphism to efekt "matowego szkła" znany z macOS Big Sur, iOS Control Center, Windows 11. Karta wygląda jakby była zrobiona z przyciemnionego, rozmytego szkła przez które widać tło. To standard nowoczesnego UI dla overlay, sidebarów, navbarów, modali.
W CSS to kombinacja kilku właściwości: `backdrop-filter: blur()` rozmywa to co jest za elementem, półprzezroczyste tło dodaje tintu, biały border 30% udaje rant szyby, miękki cień osadza element nad tłem.
Tu wybierasz kolorowe tło (gradient lub "zdjęcie") i widzisz efekt na żywo. Suwaki dostosowują siłę rozmycia, nasycenie kolorów za szybą, kolor tintu i jego przezroczystość. Wynik to gotowy blok CSS `.glass {...}`.
Jak korzystać
- Wybierz tło spod kafelkami (gradienty, syntetyczne zdjęcie). Tło musi być kolorowe i zróżnicowane żeby zobaczyć efekt rozmycia.
- Blur = siła rozmycia (16-24px to nowoczesne, 30-40px to mocny efekt "frosted glass").
- Saturate = nasycenie kolorów za szybą (100% = oryginał, 180% = wzmocnione, daje "premium" look).
- Tint + alpha = lekkie zabarwienie szkła. Biały z alpha 0.1-0.3 dla jasnego motywu, czarny z alpha 0.3 dla ciemnego.
- Border z białym 30% alpha = symuluje krawędź szyby. Cień osadza kartę nad tłem. Skopiuj CSS i wklej do swojego pliku stylów.
Do czego się przydaje
Glassmorphism dziś jest standardem w nowoczesnym design, szczególnie dla overlay UI. Kilka miejsc gdzie błyszczy:
- Navbar nad hero z fotem. Przezroczysty + blurred navbar, content przewija się pod nim, widać przez szkło.
- Modal / dialog box. Karta unosi się nad zaciemnionym backdropem, ale z lekko rozmytym tłem widocznym przez szkło.
- Sidebar w aplikacji (Notion, Linear). Szczególnie po prawej stronie nad treścią.
- Karty w hero section. Trzy karty z głównymi feature'ami z efektem matowego szkła na kolorowym tle.
- Player muzyki overlay. Apple Music / Spotify desktop = idealny przykład glassmorphism.
- Notification toast. Lekko rozmyte tło sprawia że toast nie blokuje content, ale pozostaje czytelny.
Pamiętaj: glassmorphism potrzebuje koloru za szybą. Nad białym tłem efekt jest niewidoczny. Najlepiej nad fotografią, gradientem, lub kolorowym bg. Dla podstawowego rozmycia bez tintu zobacz box-shadow. Dla zaokrąglonych rogów border-radius.