Generator szklanego fraktalu — CSS Glassmorphism online

Generuj efekt szklanego fraktalu (frosted/glazed glass) dla elementów UI. CSS backdrop-filter i glass morphism. Skopiuj kod.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Kolor bazowy 1

Kolor bazowy 2

Kolor akcentu

Kąt

Gęstość

Rozmycie

Przezroczystość

Ziarno losowości (seed)

Wysokość podglądu

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator szklanego fraktalu – nowoczesny trend w projektowaniu UI

Projektowanie interfejsów użytkownika (UI/UX) stale ewoluuje, poszukując estetycznych rozwiązań łączących czytelność z nowoczesnym wyglądem. Jednym z najpopularniejszych kierunków ostatnich lat jest Glassmorphism (szklany fraktal / mrożone szkło). Styl ten opiera się na efekcie przezroczystości, rozmycia tła oraz subtelnych, jasnych krawędziach, co sprawia, że elementy interfejsu wyglądają, jakby były wycięte z tafli matowego szkła unoszącej się nad kolorowym, dynamicznym tłem. Efekt ten z powodzeniem stosują giganci technologiczni w swoich systemach operacyjnych – Apple w iOS/macOS oraz Microsoft w systemie Windows (styl Fluent Design).

Nasz generator szklanego fraktalu online to darmowe narzędzie, które pozwala na wizualne projektowanie takich elementów UI bezpośrednio w przeglądarce. Za pomocą suwaków możesz precyzyjnie dostosować stopień przezroczystości (opacity), intensywność rozmycia tła (backdrop blur), grubość i kolor krawędzi oraz parametry cienia. Generator automatycznie tworzy w pełni zgodny standard kodu CSS wraz z niezbędnymi prefiksami dla starszych przeglądarek, który możesz skopiować jednym kliknięciem.

Parametry CSS odpowiedzialne za efekt Glassmorphism

Uzyskanie realistycznego efektu mrożonego szkła w CSS wymaga połączenia kilku kluczowych właściwości stylów. Poniższa tabela szczegółowo opisuje te parametry:

Właściwość CSS	Rola w tworzeniu efektu	Zalecany zakres wartości	Wpływ na wygląd elementu
`background`	Określa kolor bazowy i przezroczystość szkła. Najlepiej stosować format RGBA.	`rgba(255, 255, 255, 0.15)` do `rgba(255, 255, 255, 0.3)`	Zbyt wysoka przezroczystość sprawia, że tekst jest nieczytelny; zbyt niska – niszczy efekt szkła.
`backdrop-filter`	Kluczowa dyrektywa odpowiadająca za rozmycie elementów znajdujących się bezpośrednio za naszym panelem.	`blur(10px)` do `blur(20px)`	Wymaga użycia prefiksu `-webkit-backdrop-filter` dla kompatybilności z Safari.
`border`	Subtelna, jasna ramka symulująca fizyczną krawędź uciętego szkła odbijającą światło.	`1px solid rgba(255, 255, 255, 0.25)`	Ramka z delikatną przezroczystością nadaje elementowi trójwymiarowości i oddziela go od tła.
`box-shadow`	Cień rzucany przez szklany panel, nadający głębi i realizmu całej kompozycji.	Delikatny, rozproszony cień o niskim kryciu (np. `rgba(0,0,0,0.1)`).	Cień potęguje wrażenie unoszenia się panelu nad tłem (efekt warstwowości UI).

Kluczowe reguły projektowania interfejsów w stylu szklanym

Aby Glassmorphism wyglądał premium i profesjonalnie, a nie chaotycznie, należy przestrzegać podstawowych zasad projektowych:

Dynamiczne, kontrastowe tło: Efekt mrożonego szkła jest całkowicie niewidoczny na jednolitym (np. białym lub szarym) tle. Zawsze stosuj pod spodem wielobarwne gradienty, zdjęcia z miękkimi kształtami lub dynamiczne, płynne animacje tła (blob shapes).
Dbaj o czytelność tekstu: Jasny tekst (np. biały) na jasnym, półprzezroczystym panelu szklanym może być trudny do odczytania. Wybierz odpowiedni kontrast, zwiększ grubość czcionki (font-weight) lub dodaj pod tekstem delikatny cień tekstowy (text-shadow).
Hierarchia warstw: Panele, które znajdują się wyżej w osi Z (bliżej użytkownika), powinny mieć minimalnie mniejsze rozmycie i większą przezroczystość niż panele leżące pod nimi.
Zasada mniej znaczy więcej: Nie projektuj całej strony w stylu Glassmorphism. Używaj go punktowo – do kart produktowych, pasków nawigacyjnych (navbarów), okien modalnych lub paneli bocznych (sidebarów).

Jak wdrożyć efekt szklany w CSS krok po kroku?

Oto standardowy zestaw reguł CSS niezbędny do ostylowania szklanej karty:

Stwórz element HTML: Przygotuj kontener w swoim kodzie (np. <div class="glass-card"></div>).
Zastosuj półprzezroczysty kolor tła: Użyj formatu RGBA z dominacją bieli lub ciemnego granatu w przypadku wersji dark mode.
Dodaj rozmycie backdrop-filter: Jest to najważniejszy element konfiguracji. Pamiętaj o dodaniu prefiksu Webkit dla pełnej kompatybilności z przeglądarkami iOS i macOS.
Ogranicz krawędź i dodaj zaokrąglenie: Zaokrąglone rogi (border-radius) w połączeniu z cienką przezroczystą ramką doskonale imitują nowoczesną taflę szkła.

Często zadawane pytania (FAQ)

Czy backdrop-filter działa we wszystkich przeglądarkach?

Współczesne przeglądarki (Chrome, Edge, Firefox, Opera) w pełni obsługują tę własność. W przypadku przeglądarki Safari (zarówno na macOS, jak i iOS) wymagane jest dodanie prefiksu -webkit-backdrop-filter. Starsze wersje przeglądarki Internet Explorer nie obsługują tego efektu.

Jak zachować dostępność (Accessibility - WCAG) w Glassmorphism?

Projektując szklane elementy, zawsze weryfikuj kontrast tekstu do tła za pomocą narzędzi WCAG. Jeśli kontrast jest zbyt niski, zwiększ krycie tła (np. z 0.1 na 0.3) lub zmień kolor tekstu na ciemniejszy/jaśniejszy w zależności od jasności elementów pod spodem.

Jaka jest różnica między filter a backdrop-filter w CSS?

Właściwość filter nakłada efekty (np. blur) na sam element i całą jego zawartość (w tym na tekst wewnątrz). Właściwość backdrop-filter nakłada efekty wyłącznie na elementy znajdujące się za naszym kontenerem – tekst wewnątrz szklanego panelu pozostaje idealnie ostry i czytelny.

Czy Glassmorphism spowalnia działanie strony na urządzeniach mobilnych?

Nadmierne stosowanie efektu backdrop-filter: blur() na wielu elementach jednocześnie może obciążać układ graficzny (GPU) słabszych urządzeń mobilnych, powodując spadki płynności przewijania strony. Stosuj ten efekt z umiarem.

Jak stworzyć ciemną wersję szkła (Dark Glassmorphism)?

Aby uzyskać ciemną wersję mrożonego szkła, zamiast białego tła użyj półprzezroczystego koloru ciemnego (np. rgba(15, 23, 42, 0.4)) oraz ciemniejszej, subtelnej krawędzi (np. rgba(255, 255, 255, 0.1)).