Generator Glassmorfizmu
Create glassmorphism CSS effects with visual controls. Adjust opacity, blur, saturation for frosted glass UI.
Najwazniejsze funkcje
- Regulowane krycie, rozmycie i nasycenie
- Wybór niestandardowego koloru odcienia
- Podgląd na żywo na tle gradientu
- Wynik CSS gotowy do skopiowania
Guide
Glassmorfizm to wizualny styl projektowania, w którym elementy UI pojawiają się jako panele mrożonego szkła pływające nad kolorowym tłem. Efekt opiera się na trzech właściwościach CSS działających razem: przezroczystości tła (rgba lub hsla z niską alfą), rozmyciu tła (backdrop-filter: blur()) i subtelnej obramowaniu lub cieniu, które definiują krawędź panelu. Styl zyskał znaczenie w 2020 roku z macOS Big Sur firmy Apple i od tego czasu stał się stałym elementem nowoczesnego projektowania UI webowego i mobilnego. Ten przewodnik obejmuje techniczną implementację, implikacje wydajności, zasady projektowania i praktyczne wzorce skutecznego używania glassmorfizmu. Podstawowy CSS dla panelu glassmorfizmu wymaga trzech deklaracji. Po pierwsze, półprzezroczyste tło: background: rgba(255, 255, 255, 0,15) dla efektu lekkiego szkła lub background: rgba(0, 0, 0, 0,25) dla efektu ciemnego szkła. Po drugie, rozmycie tła: backdrop-filter: blur(12px). Po trzecie, obramowanie, które łapie światło: border: 1px solid rgba(255, 255, 255, 0,2). Połączenie przezroczystego tła, rozmytego tła i luminującego obramowania tworzy iluzję mrożonego szkła. Bez któregokolwiek z tych trzech komponentów efekt jest płaski. Przezroczyste tło bez rozmycia wygląda jak kolorowa nakładka. Rozmycie bez przezroczystości nie pokazuje niczego za elementem. A bez obramowania krawędzie panelu znikają w tle. Właściwość backdrop-filter aplikuje efekty graficzne do obszaru za elementem. Obsługuje te same funkcje filtra co właściwość filter CSS: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() i drop-shadow(). Dla glassmorfizmu blur() to podstawowa funkcja. Promień rozmycia kontroluje intensywność efektu mrożonego: blur(4px) tworzy subtelną miękkość, blur(12px) tworzy średni mróz, a blur(24px) tworzy ciężki mróz, gdzie detale tła są ledwo widoczne. Możesz łączyć wiele funkcji: backdrop-filter: blur(12px) saturate(180%) dodaje wibrację koloru do rozmytego tła, czyniąc kolory za szkłem bardziej żywymi. Wartość promienia rozmycia determinuje, jak szklisty vs stały wydaje się panel. Niższe wartości (4px do 8px) utrzymują więcej detalu tła i czują się lżej. Średnie wartości (10px do 16px) tworzą klasyczny wygląd mrożonego szkła. Wyższe wartości (20px+) zasłaniają tło prawie całkowicie, przy czym tracisz metaforę szkła, a panel wygląda jak stała półprzezroczysta powierzchnia. Dla większości zastosowań UI 8px do 16px trafia we właściwy balans między wizualnym zainteresowaniem a czytelnością treści. Przetestuj swój wybrany promień rozmycia ze swoim rzeczywistym tłem, by zweryfikować, że efekt działa zgodnie z intencją. Alfa tła (przezroczystość) pracuje w napięciu z promieniem rozmycia. Tło z bardzo niską alfą (0,05 do 0,10) pokazuje więcej rozmytego tła, tworząc lżejsze, bardziej przezroczyste uczucie. Tło z wyższą alfą (0,25 do 0,40) zasłania więcej tła, tworząc bardziej stałe, nieprzezroczyste uczucie. Prawidłowa kombinacja zależy od tego, co leży za panelem szkła. Nad zajęty, kolorowym tłem wyższa alfa i silniejsze rozmycie zapewniają, że tekst pozostanie czytelny. Nad prostym, wyciszonym tłem niższa alfa i lżejsze rozmycie tworzą bardziej elegancki efekt. Nie ma jednej poprawnej kombinacji. Każdy kontekst projektowy wymaga testowania, by znaleźć balans między efektem wizualnym a użytecznością. Obramowanie i cień definiują krawędź panelu szkła i są istotne, by iluzja zadziałała. Bez obramowania panel wtapia się w otoczenie i traci swój jakości wymiarowe. Cienkie obramowanie używające rgba(255, 255, 255, 0,18) na panelu lekkiego szkła lub rgba(255, 255, 255, 0,08) na panelu ciemnego szkła symuluje światło łapiące krawędź prawdziwego szkła. Box-shadow dodaje głębię: box-shadow: 0 8px 32px rgba(0, 0, 0, 0,12) dla lekkiego cienia lub box-shadow: 0 8px 32px rgba(0, 0, 0, 0,37) dla bardziej dramatycznej elewacji. Cień wzmacnia, że panel unosi się nad tłem. Niektóre implementacje dodają drugi, wewnętrzny cień dla dodatkowego wymiaru. Wydajność backdrop-filter to najważniejsze rozważenie dla produkcyjnego użycia. Rozmycie tła jest intensywnie obciążające dla GPU, bo przeglądarka musi wyrenderować treść za elementem, aplikować filtr rozmycia do tej wyrenderowanej treści, następnie skomponować rozmyty wynik pod półprzezroczystym elementem. To zdarza się w każdej klatce, jeśli coś za panelem szkła się zmienia (przewijanie, animacje, wideo). Na wysokoklasowych GPU desktopowych to jest płynne. Na urządzeniach mobilnych niskiej klasy może powodować znaczące spadki klatek i drenaż baterii. Koszt wydajności skaluje się z promieniem rozmycia i obszarem podlegającym rozmyciu. Mała karta szkła z blur(8px) jest znacznie tańsza niż pełnoszerokościowy pasek nawigacji szkła z blur(20px). Strategie optymalizacji wydajności obejmują ograniczanie liczby elementów szkła widocznych naraz (unikaj umieszczania paneli szkła na każdej karcie w siatce 50 elementów), redukcję promienia rozmycia na mobile (blur(8px) zamiast blur(20px) na mniejszych ekranach), unikanie efektów szkła nad animowanymi lub wideo tłami na mobile i używanie will-change: backdrop-filter jako podpowiedzi dla przeglądarki, by przygotować zasoby GPU. Możesz też użyć właściwości contain: paint na elemencie szkła, by ograniczyć zakres komponowania. Testuj na rzeczywistych urządzeniach niskiej klasy, nie tylko na swojej maszynie deweloperskiej. Efekt szkła, który działa dobrze na MacBook Pro, może się zacinać na budżetowym telefonie Android z GPU Adreno 505. Obsługa backdrop-filter w przeglądarkach jest teraz powszechna. Chrome, Edge, Safari i Firefox wszystkie go obsługują. Prefiks -webkit- (-webkit-backdrop-filter) jest nadal potrzebny dla wersji Safari przed 18. Internet Explorer go nie obsługuje. Dla przeglądarek bez obsługi fallback to stałe półprzezroczyste tło bez rozmycia. Zdefiniuj to jako domyślne i nałóż rozmycie na wierzch: background: rgba(255, 255, 255, 0,7) jako fallback (bardziej nieprzezroczyste, by utrzymać czytelność bez rozmycia), następnie @supports (backdrop-filter: blur(1px)) { background: rgba(255, 255, 255, 0,15); backdrop-filter: blur(12px); } dla przeglądarek zdolnych. Fallback utrzymuje użyteczność kosztem efektu szkła. Kompletny snippet CSS glassmorfizmu wygląda tak. Dla stylów bazowych: background: rgba(255, 255, 255, 0,7) jako fallback dla przeglądarek bez obsługi backdrop-filter. Następnie wewnątrz bloku @supports: background: rgba(255, 255, 255, 0,15), po którym następuje backdrop-filter: blur(12px) i -webkit-backdrop-filter: blur(12px). Poza blokiem @supports dodaj border: 1px solid rgba(255, 255, 255, 0,2), box-shadow: 0 8px 32px rgba(0, 0, 0, 0,1) i border-radius: 16px. Ten wzorzec obejmuje wszystkie przeglądarki z gracjonalną degradacją. Temperatura koloru efektu szkła ustawia nastrój. Ciepłe szkło używa lekko barwionych teł: rgba(255, 200, 150, 0,15) dodaje ciepły bursztynowy odcień. Chłodne szkło używa niebieskich odcieni: rgba(100, 150, 255, 0,15). Neutralne szkło używa bieli lub czerni przy różnych nieprzezroczystościach. Odcień wchodzi w interakcję z tym, jakie kolory są za szkłem, więc postrzegany kolor zmienia się, gdy tło się zmienia. Ta dynamiczna jakość jest częścią tego, co sprawia, że glassmorfizm czuje się żywy i responsywny do kontekstu. Dla szkła w kolorze marki użyj koloru marki przy bardzo niskiej alfie (0,05 do 0,15), by utrzymać efekt półprzezroczysty, wzmacniając jednocześnie tożsamość marki. Glassmorfizm trybu ciemnego odwraca podejście. Zamiast lekkiego szkła nad kolorowym tłem użyj ciemnego szkła (rgba(0, 0, 0, 0,40) lub rgba(17, 25, 40, 0,60)) z jaśniejszym obramowaniem (rgba(255, 255, 255, 0,08)). Rozmycie tła działa tak samo. Panele ciemnego szkła wyglądają wyrafinowanie nad ciemnymi tłami z subtelnymi gradientami kolorów lub efektami światła otoczenia. Centrum Kontroli Apple na iOS to kanoniczny przykład ciemnego glassmorfizmu. Dla trybu ciemnego przesunięcie koloru obramowania jest ważne: przełącz z białych obramowań na nieco jaśniejsze wersje ciemnego tła, by utrzymać krawędź szkła bez wydawania się obramowania zbyt jasnym. Czytelność tekstu na panelach szkła wymaga ostrożnej uwagi, bo to jest miejsce, gdzie glassmorfizm najczęściej zawodzi. Półprzezroczyste, rozmyte tło oznacza, że efektywny kolor tła zmienia się w zależności od tego, co jest za panelem. Biały tekst może być czytelny, gdy panel jest nad ciemnym obszarem tła, ale nieczytelny, gdy przesuwa się nad jasny obszar (podczas przewijania, na przykład). Rozwiązania obejmują używanie wyższej alfy tła, by zapewnić minimalny kontrast niezależnie od tego, co jest za, dodanie text-shadow dla dodatkowego rozdzielenia (text-shadow: 0 1px 2px rgba(0, 0, 0, 0,3)), używanie pogrubionych wag fontu (600 lub 700 zamiast 400) i zapewnienie, że tło za panelami szkła jest kontrolowane i nie zbyt zróżnicowane w jasności. Warstwowe szkło tworzy głębię przez ułożenie w stos wielu paneli szkła z różnymi poziomami rozmycia i nieprzezroczystości. Warstwa szkła tła z ciężkim rozmyciem i niską nieprzezroczystością siedzi za panelem szkła pierwszego planu z lżejszym rozmyciem i nieco wyższą nieprzezroczystością. To tworzy poczucie głębi i hierarchii. Apple używa tego w szerokim zakresie w macOS i iOS. Zaimplementuj to z warstwowaniem z-index: warstwa tła ma wyższy promień rozmycia (blur(20px)), a warstwa pierwszego planu ma niższy promień rozmycia (blur(8px)) z nieco większą nieprzezroczystością. Trzy lub więcej warstw jest możliwe, ale rzadkie, a każda warstwa dodaje do kosztu renderowania. Glassmorfizm działa najlepiej dla specyficznych wzorców UI: paski nawigacji pływające nad treścią, modalne okna dialogowe i nakładki, panele powiadomień, paski boczne, elementy kart nad sekcjami hero, kontrolki odtwarzacza mediów nad okładką albumu, elementy tooltip i popover oraz widżety pulpitu nad wizualizacjami danych. Działa słabo dla gęstych obszarów treści (tekst artykułu, tabele danych, formularze z wieloma polami), gdzie przesuwające się tło za szkłem rozprasza od treści. Używaj efektów szkła jako akcentów, nie jako domyślnego traktowania powierzchni dla wszystkiego na stronie. Tło za panelem szkła ma tak samo duże znaczenie jak samo szkło. Glassmorfizm wygląda najlepiej nad kolorowymi, gradientowymi tłami z płynnymi przejściami. Gradient od głębokiego fioletu do oceanicznego niebieskiego lub od ciepłego pomarańczowego do różu zapewnia idealne tło dla efektu rozmycia. Panel szkła zmiękcza i rozprasza te kolory pięknie. Nad zwykłym białym lub zwykłym czarnym tłem efekt szkła jest niewidoczny, bo nie ma nic do rozmycia. Nad zajętym fotograficznym tłem z ostrymi detalami rozmycie produkuje mętny wynik. Projektuj swoje tło i swoje panele szkła razem jako system. Łączenie glassmorfizmu z innymi elementami projektowymi wzmacnia efekt. Subtelne gradienty na tle panelu szkła (linear-gradient od rgba(255,255,255,0,2) do rgba(255,255,255,0,05)) dodają kierunkowe światło. Wewnętrzne cienie (box-shadow: inset 0 1px 0 rgba(255,255,255,0,2)) symulują światło uderzające w górną krawędź szkła. Border-radius zmiękcza panel (16px do 24px jest powszechne w projektach glassmorfizmu). Razem te detale sprawiają, że szkło czuje się bardziej fizyczne i trójwymiarowe. Animacja z elementami szkła powinna być płynna i celowa. Wygaszaj panele szkła z przejściami opacity. Przesuwaj je w pozycję z translacjami transform. Unikaj animowania wartości rozmycia backdrop-filter samej w sobie, bo zmiana promienia rozmycia w każdej klatce zmusza przeglądarkę do regenerowania rozmytego tła, co jest niezwykle kosztowne. Jeśli potrzebujesz animacji rozmycia, rozważ animowanie osobnej rozmytej warstwy tła używając CSS filter: blur() na pseudo-elemencie, co jest łatwiejsze dla przeglądarek do zoptymalizowania niż backdrop-filter. Transform i opacity na elementach szkła działają dobrze, bo nie wymagają przeliczania rozmycia. Integracja glassmorfizmu z systemem projektowym wymaga zdefiniowania zestawu tokenów szkła: kolory tła szkła przy lekkich i ciemnych nieprzezroczystościach, kolory obramowania szkła, wartości cienia szkła i promienie rozmycia szkła dla różnych kontekstów. Twórz wielokrotnego użytku klasy CSS lub warianty komponentów: .glass-light, .glass-dark, .glass-subtle, .glass-prominent. Dokumentuj, które warianty szkła działają na jakich typach tła. To zapobiega niespójności ad-hoc wartości szkła w całej bazie kodu i zapewnia, że efekt degraduje się konsekwentnie w nieobsługiwanych przeglądarkach. Glassmorfizm w React, Vue i innych frameworkach komponentów jest zazwyczaj implementowany jako komponent wielokrotnego użytku lub klasa narzędzi CSS. W React komponent GlassPanel przyjmuje props dla intensywności rozmycia, nieprzezroczystości, koloru odcienia i widoczności obramowania, renderując div z obliczonymi stylami. Tailwind CSS czyni glassmorfizm prostym z klasami narzędzi: bg-white/15 backdrop-blur-md border border-white/20 rounded-2xl shadow-lg. Implementacja na poziomie komponentów zapewnia spójne efekty szkła w całej aplikacji i zapewnia jedno miejsce do aktualizacji efektu, gdy wymagania projektowe się zmieniają. Rozważenia dostępności z glassmorfizmem koncentrują się na czytelności tekstu i wrażliwości na ruch. Jak omówiono, przesuwające się tło za panelami szkła może utrudniać czytanie tekstu. Dodatkowo sam efekt rozmycia to efekt wizualny, który niektórzy użytkownicy z zaburzeniami przedsionkowymi mogą uznać za dezorientujący, szczególnie gdy panele szkła przewijają się nad zmieniającymi się tłami. Szanuj zapytania medialne prefers-reduced-transparency i prefers-reduced-motion. Dla użytkowników, którzy preferują zredukowaną przezroczystość, fallbackuj do stałego nieprzezroczystego tła. Dla użytkowników, którzy preferują zredukowany ruch, unikaj animowania paneli szkła. Glassmorfizm w porównaniu do innych trendów projektowych zajmuje specyficzną niszę. Neumorfizm (soft UI) używa subtelnych cieni do tworzenia efektów podniesionych i wciśniętych na jednokolorowych tłach. Cierpi na słaby kontrast i problemy z dostępnością. Flat design używa stałych kolorów bez efektów głębi. Material Design używa elewacji i cieni na nieprzezroczystych powierzchniach. Glassmorfizm siedzi między flat design a material design, dodając głębię przez przezroczystość zamiast samego cienia. Działa najlepiej jako styl akcentowy. Cała aplikacja w glassmorfizmie staje się wizualnie hałaśliwa. Selektywne użycie (nawigacja, modale, wyróżnione karty) tworzy wizualne zainteresowanie bez przytłaczania użytkownika. Przykłady z prawdziwego świata implementacji glassmorfizmu dostarczają punktów odniesienia. Apple używa glassmorfizmu w szerokim zakresie w macOS (pasek menu, paski boczne, centrum powiadomień) i iOS (Centrum Kontroli, widżety, przełącznik aplikacji). Microsoft używa materiału Acrylic w Windows 11 (menu Start, pasek zadań, panele ustawień), który jest wariacją glassmorfizmu z nakładką tekstury szumu. Te implementacje demonstrują, że glassmorfizm działa najlepiej, gdy system operacyjny lub aplikacja kontroluje treść tła, zapewniając spójny poziom rozmycia i kontrastu. W sieci, gdzie kontrolujesz zarówno tło, jak i panele szkła, masz ten sam poziom kontroli. Nakładka tekstury szumu dodaje subtelne ziarno do paneli szkła, które sprawia, że wyglądają bardziej jak fizyczne mrożone szkło. Prawdziwe mrożone szkło ma lekko szorstką teksturę, a nie idealnie gładkie rozmycie. Możesz dodać tę teksturę z pseudo-elementem używając szumu PNG lub filtra SVG przy bardzo niskiej nieprzezroczystości (2 do 5 procent). Szum zapobiega wyglądaniu szkła zbyt cyfrowo czysto. Materiał Acrylic Microsoftu używa tej techniki. Implementacja: dodaj pseudo-element ::before z małym kafelkowym obrazem szumu jako tło, position absolute, by wypełnić panel, i ustaw opacity na 0,03 do 0,05. Glassmorfizm przy przewijaniu wymaga ostrożnej implementacji. Stały pasek nawigacji szkła nad przewijaną treścią tworzy stale zmieniający się efekt rozmycia, gdy różna treść przechodzi za nim. To wygląda świetnie, ale jest intensywne dla wydajności, bo backdrop-filter musi być przeliczane w każdej klatce podczas przewijania. Dla długich stron z ciężkim rozmyciem opartym na przewijaniu rozważ użycie prostszego efektu na mobile (stałe półprzezroczyste tło) i zarezerwowanie pełnego efektu szkła dla desktopu, gdzie moc GPU jest zazwyczaj wystarczająca. Testowanie glassmorfizmu między różnymi typami treści za szkłem ujawnia, jak solidna jest Twoja implementacja. Testuj z treścią tekstową, obrazami, wideo, stałymi kolorami, gradientami i mieszaną treścią przechodzącą za panelem szkła. Każdy typ treści produkuje różne wyniki rozmycia. Gęsty tekst za szkłem tworzy szare rozmycie. Kolorowe obrazy tworzą żywe, przesuwające się kolory. Wideo tworzy stale zmieniające się rozmycie. Twój panel szkła musi utrzymać czytelność tekstu i wizualny urok przez wszystkie te scenariusze, albo musisz ograniczyć, jaka treść może pojawić się za elementami szkła. Glassmorfizm łączony ze wzorcami mrożonego paska bocznego tworzy charakterystyczny układ aplikacji. Pasek boczny szkła nad głównym obszarem treści zapewnia nawigację bez pełnego zasłaniania treści. Najechanie lub rozszerzenie paska bocznego ujawnia więcej efektu szkła. Ten wzorzec działa dobrze dla dashboardów i paneli administracyjnych, gdzie pasek boczny jest elementem drugorzędnym. Zaimplementuj to ze stałym lub przyklejonym elementem paska bocznego niosącym style szkła, pozycjonowanym nad głównym obszarem treści z odpowiednim z-index. Tylko CSS alternatywy dla backdrop-filter istnieją dla starszych przeglądarek lub sytuacji ograniczonych wydajnością. Pseudo-element (::before) pozycjonowany za treścią może nieść rozmytą kopię tła używając background-attachment: fixed z tym samym obrazem tła co strona, plus CSS filter: blur(). To podejście nie rozmywa rzeczywistej treści za elementem (zamiast tego rozmywa stały obraz tła), więc działa tylko dla stałych teł, nie dynamicznej treści. Mimo tego ograniczenia produkuje przekonujący efekt szkła z lepszą obsługą przeglądarek i wydajnością niż backdrop-filter, bo rozmycie jest aplikowane raz do statycznego obrazu zamiast przeliczane w każdej klatce. Generator glassmorfizmu pozwala Ci dostosować kolor tła, nieprzezroczystość, promień rozmycia, obramowanie i cień w czasie rzeczywistym, podglądając wynik nad przykładowym tłem. Skopiuj wygenerowany CSS bezpośrednio do swojego arkusza stylów. Zacznij od wygenerowanych wartości jako bazy, a następnie dostosuj je w kontekście z swoim rzeczywistym tłem i treścią. Generator obsługuje składnię włączając prefiks -webkit- dla kompatybilności z Safari i fallback @supports dla przeglądarek bez obsługi backdrop-filter.
Czeste pytania
Czym jest glassmorphism?
Glassmorphism to trend w projektowaniu UI z elementami półprzezroczystymi, przypominającymi matowe szkło, z rozmyciem tła i subtelnymi obramowaniami.
Czy glassmorphism działa we wszystkich przeglądarkach?
Właściwość backdrop-filter jest obsługiwana we wszystkich nowoczesnych przeglądarkach, w tym Chrome, Firefox, Safari i Edge.
