Twórz modne efekty UI matowego szkła. Dostosuj rozmycie, przezroczystość i obramowania, a następnie skopiuj CSS bezpośrednio do swojego projektu. W 100% darmowe. Bez rejestracji.
Modny efekt matowego szkła dla nowoczesnych stron WWW.
Stworzone od podstaw dla pełnej prywatności i natychmiastowego działania. Bez subskrypcji, opłat i rejestracji.
Dostosowuj rozmycie, krycie i nasycenie w czasie rzeczywistym na żywym tle, aby natychmiast podglądać efekt szkła.
Automatycznie generuje kod backdrop-filter z prefiksem webkit, zapewniając zgodność z Safari, Chrome i Firefox.
Generuj standardowe klasy CSS lub natychmiast przekształcaj projekt w klasy użytkowe dla Tailwind CSS.
Wykonanie w 100% po stronie klienta oznacza, że możesz przesuwać suwaki i widzieć zmiany w CSS bez opóźnień.
Porównaj nasz lokalny silnik WebAssembly ze starymi narzędziami chmurowymi.
| Funkcja | Utiliome (Lokalnie w przeglądarce) | Tradycyjne konwertery chmurowe |
|---|---|---|
| Podgląd na żywo | Interaktywny obszar w czasie rzeczywistym | Statyczne generatory kodu |
| Wyjściowy kod | Czysty CSS i klasy użytkowe Tailwind | Tylko CSS |
| Kompatybilność | Automatycznie dodaje -webkit-backdrop-filter | Wymaga ręcznego dodawania prefiksów |
| Koszt | Darmowe na zawsze, bez reklam | Płatności za układy premium |
Instalacja oprogramowania nie jest wymagana. Wszystko działa w Twojej przeglądarce.
Użyj suwaka rozmycia, aby określić, jak mocno elementy tła pod kartą mają być rozmyte.
Zmień kanał alfa koloru tła, aby nadac szkłu delikatny ciemny odcień lub jasny, mrożony wygląd.
Kliknij przycisk eksportu, aby skopiować gotowy fragment kodu CSS bezpośrednio do schowka.
Szybka odpowiedź: Glassmorphism to nowoczesny trend w projektowaniu interfejsów użytkownika, charakteryzujący się półprzezroczystym tłem z mocnym rozmyciem (mrożone szkło), delikatnymi cieniami i cienkimi ramkami.
Wywodzący się z systemów macOS Big Sur, iOS oraz Windows 11 Fluent Design, Glassmorphism stał się standardem dla nowoczesnych aplikacji internetowych premium.
Główna koncepcja opiera się na "osi Z". Tworząc półprzezroczystą warstwę wierzchnią i rozmywając warstwy pod nią, projektanci tworzą hierarchię wizualną bez ciężkich cieni. Daje to użytkownikowi podgląd tego, co znajduje się pod aktywnym oknem.
Szybka odpowiedź: Właściwość CSS backdrop-filter stosuje efekty graficzne, takie jak rozmycie lub przesunięcie kolorów, do obszaru bezpośrednio za elementem. W przeciwieństwie do zwykłego 'filter', wpływa tylko na to, co widać przez przezroczyste tło.
Aby uzyskać efekt szkła, deweloperzy polegają na regule backdrop-filter. Gdy ustawisz półprzezroczysty kolor tła (np. background: rgba(255, 255, 255, 0.2);) i dodasz backdrop-filter: blur(10px);, silnik przeglądarki pobiera piksele za elementem i matematycznie je rozmywa.
Ponieważ wymaga to stałego przeliczania pikseli podczas przewijania, jest to właściwość akcelerowana sprzętowo. Generator Utiliome oblicza te parametry na żywo, pozwalając na podgląd wydajności.
Szybka odpowiedź: Tailwind CSS oferuje wbudowane klasy dla efektu szkła. Połącz 'backdrop-blur-md', 'bg-white/30' oraz cienką ramkę 'border-white/20', aby szybko uzyskać efekt oszklonego tła bez pisać własnego CSS.
Pisanie własnego CSS jest świetne do nauki, ale nowoczesni deweloperzy często wolą frameworki takie jak Tailwind.
Aby stworzyć szklaną kartę w Tailwind, potrzebujesz trzech warstw:
backdrop-blur-md lub backdrop-blur-lg, aby rozmyć tło.bg-white/20 (tryb jasny) lub bg-slate-900/40 (tryb ciemny), aby nadać strukturę.border border-white/20.Generator Utiliome umożliwia przełączanie między standardowym kodem CSS a gotowymi klasami Tailwind.
Szybka odpowiedź: Safari wymagało prefiksu '-webkit-' dla właściwości backdrop-filter. Bez tego prefiksu efekt szkła nie zadziała na urządzeniach z iOS i macOS, pozostawiając zwykłe przezroczyste pole.
Częstym błędem początkujących deweloperów jest pomijanie specyfiki urządzeń Apple. Podczas gdy Chrome i Firefox obsługują backdrop-filter natywnie, Safari wymaga prefiksu dostawcy.
Jeśli nie dodasz -webkit-backdrop-filter: blur(10px);, użytkownicy urządzeń Apple zobaczą tylko nieczytelny tekst na przezroczystym tle.
Generator CSS Utiliome automatycznie dodaje wymagane prefiksy WebKit do generowanego kodu, gwarantując spójny wygląd na wszystkich systemach.
Szybka odpowiedź: Glassmorphism często prowadzi do problemów z dostępnością, ponieważ tekst na rozmytym tle może nie spełniać norm kontrastu WCAG. Upewnij się, że kolor tekstu jest wystarczająco kontrastowy.
Najczęstszą krytyką tego trendu jest niska dostępność. Jeśli kolorowe tło zmieni się pod szklaną kartą z ciemnego na jasne, biały tekst może stać się niewidoczny.
Aby temu zapobiec, należy zastosować odpowiednio mocne przyciemnienie lub rozjaśnienie tła (krycie). Na przykład przy białym tekście warto użyć tła rgba(0, 0, 0, 0.6), aby zachować wymagany prawem minimalny kontrast 4.5:1.
Szybka odpowiedź: Płaska płyta z rozmytego szkła nie wygląda realistycznie. Musisz ją unieść za pomocą delikatnego, szerokiego cienia (np. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)), aby oddzielić ją od tła.
Ludzki mózg potrzebuje wskazówek świetlnych, aby właściwie interpretować głębię. Samo rozmycie tła może sprawić, że interfejs wyda się płaski.
Aby nadać mu trójwymiarowości, warto unieść element na osi Z. Generator Utiliome pozwala dostosować box-shadow, tworząc miękki cień, który ładnie separuje szkło od tła.
Wszystko, co musisz wiedzieć o darmowym narzędziu online Generator Glassmorphism CSS od Utiliome.
Safari wymaga prefiksu '-webkit-backdrop-filter'. Utiliome automatycznie dodaje ten prefiks w generowanym kodzie CSS, aby zapewnić pełną kompatybilność.
Tak. Generator Utiliome posiada przełącznik, który natychmiast zamienia projekt na klasy narzędziowe Tailwind (np. backdrop-blur-md bg-white/30).
Tak, nadmierne stosowanie dużych rozmyć na słabszych urządzeniach mobilnych może powodować spowolnienia, ponieważ zmusza GPU do ciągłego przeliczania pikseli.
Prawdziwe szkło odbija światło na krawędziach. Dodaj ramkę 1px o bardzo niskiej przezroczystości (np. rgba(255, 255, 255, 0.2)), aby imitować to odbicie.
Tak, jest w 100% darmowy, bez limitów, reklam i konieczności rejestracji konta.
Masz propozycję funkcji lub znalazłeś błąd? Porozmawiaj z nami bezpośrednio na Discordzie.