Generator Glassmorphism CSS — Efekt Matowego Szkła

Generator Glassmorphism CSS — Projektuj Efekt Matowego Szkła

Twórz piękne efekty interfejsu glassmorphism (matowe szkło) za pomocą wizualnego edytora na żywo. Reguluj rozmycie, przezroczystość, nasycenie, obramowanie i promień rogów, obserwuj wynik aktualizujący się natychmiast na kolorowym tle, i kopiuj gotowy do użycia CSS. Wygląd matowego szkła spopularyzowany przez iOS, macOS Big Sur i Windows 11 jest teraz o jedno kliknięcie.

Czym jest glassmorphism?

Glassmorphism to styl projektowania, w którym elementy interfejsu wyglądają jak matowe szkło: półprzezroczyste tło z rozmyciem zastosowanym do tego, co jest za nim, subtelne jasne obramowanie i miękki cień. Kluczową właściwością CSS jest backdrop-filter: blur(), która rozmywa zawartość za elementem, a nie sam element.

Elementy sterujące

• Rozmycie: jak intensywnie rozmywane jest tło za kartą (rdzeń efektu)
• Przezroczystość: krycie odcienia szkła — niższe przepuszcza więcej tła
• Nasycenie: wzmacnia kolory za szkłem dla bogatszego wyglądu
• Promień obramowania: zaokrągla rogi karty
• Grubość obramowania: cienkie jasne obramowanie dodaje realistyczną krawędź szkła
• Odcień + tryb ciemny: przesuń szkło w stronę koloru lub przełącz na wariant ciemnego szkła

Ważne: wsparcie backdrop-filter

• Efekt opiera się na backdrop-filter, obsługiwanym we wszystkich nowoczesnych przeglądarkach
• Generator zawiera prefiks -webkit-backdrop-filter dla Safari
• Element musi znajdować się nad jakąś zawartością lub tłem — nie ma nic do rozmycia na białej stronie
• Unikaj nadmiernego rozmycia; 8-16px zwykle wygląda najlepiej

Wskazówki projektowe

• Glassmorphism błyszczy na kolorowych gradientach lub zdjęciach — wypróbuj predefiniowane tła
• Zachowaj wysoki kontrast tekstu, aby pozostał czytelny na rozmyciu
• Używaj go oszczędnie do kart, pasków nawigacji lub okien modalnych — nie całych stron

Prywatność

To narzędzie działa całkowicie w Twojej przeglądarce. Nic nie jest przesyłane ani przechowywane.