Generator Glassmorphism
Generator glassmorphism tworzy efekt matowego szkła za pomocą CSS backdrop-filter, pozwalając regulować rozmycie, krycie tła, nasycenie, krycie obramowania, zaokrąglenie i kolor zabarwienia z podglądem na żywo.
O tym narzędziu
Generator glassmorphism tworzy efekt matowego szkła za pomocą CSS backdrop-filter, pozwalając regulować rozmycie, krycie tła, nasycenie, krycie obramowania, zaokrąglenie i kolor zabarwienia z podglądem na żywo.
Jak używać
- Wybierz kolor zabarwienia szkła.
- Dostosuj rozmycie, krycie i nasycenie.
- Ustaw krycie obramowania i promień zaokrąglenia.
- Kliknij Copy CSS.
Warto wiedzieć
- Efekt korzysta z backdrop-filter: blur() saturate(), który rozmywa wszystko, co znajduje się za elementem.
- Potrzebne jest półprzezroczyste tło (rgba), inaczej rozmycie nie będzie widoczne.
- Wygenerowany CSS zawiera prefiks -webkit-backdrop-filter dla Safari.
- Szkło najlepiej wygląda na kolorowym tle lub zdjęciu; na jednolitym kolorze rozmycia nie widać.
- Pilnuj kontrastu tekstu — półprzezroczyste panele na złożonym tle mogą spaść poniżej progu kontrastu WCAG.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
Jak zrobić efekt szkła w CSS?
Nadaj elementowi półprzezroczyste tło, np. rgba(255,255,255,0.15), oraz backdrop-filter: blur(12px); to narzędzie napisze całą regułę.
Dlaczego backdrop-filter nie działa?
Element potrzebuje przezroczystego lub półprzezroczystego tła, a za nim musi być coś do rozmycia. Safari wymaga też prefiksu -webkit-.
Czy glassmorphism jest dostępny?
Może być, jeśli tekst zachowuje wystarczający kontrast. Testuj kolory tekstu na najbardziej złożonym fragmencie tła.
Czy backdrop-filter obciąża wydajność?
Rozmywanie mocno obciąża GPU, więc unikaj stosowania go na bardzo dużych obszarach lub wielu elementach naraz, zwłaszcza na słabszych telefonach.