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.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Odłamki szkła
3 + 0,6 × gęstość — radialne rozbłyski akcentem
Warstwy gradientów
blask kątowy + odłamki + mgła + baza
Rozmiar kodu CSS
cała grafika to jeden background-image
Rozmycie
filter: blur — przy 0 klasa bez filtra
.fractal-glass-bg {
background-image: repeating-conic-gradient(from 140deg, rgba(255, 255, 255, 0.07) 0deg, transparent 21deg, rgba(250, 134, 23, 0.058) 27deg, transparent 35deg), radial-gradient(circle at 66% 92%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 17%, transparent 35%), radial-gradient(circle at 40% 29%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 11%, transparent 39%), radial-gradient(circle at 75% 27%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 18%, transparent 56%), radial-gradient(circle at 26% 72%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 22%, transparent 53%), radial-gradient(circle at 13% 52%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 12%, transparent 45%), radial-gradient(circle at 73% 39%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 12%, transparent 30%), radial-gradient(circle at 13% 71%, rgba(250, 134, 23, 0.5) 0%, rgba(250, 134, 23, 0.22) 17%, transparent 40%), radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.064), transparent 55%), radial-gradient(circle at 80% 90%, rgba(255, 255, 255, 0.026), transparent 55%), linear-gradient(140deg, #0D6EFD, #7C3AED);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
filter: blur(10px);
}
| Warstwa / mechanizm | Jak działa w kodzie |
|---|---|
| Blask kątowy | repeating-conic-gradient „od kąta”: krok wiązki = max(10, 34 − 2,2 × gęstość) stopni — wyższa gęstość daje gęstsze promienie; co ~6 stopni wtrącony akcent |
| Odłamki szkła | liczba = 3 + zaokrąglone(0,6 × gęstość); każde to radial-gradient w punkcie 5–95% × 5–95% (mt_rand), promień rdzenia 10–22%, zewnętrzny jeszcze +18–42% |
| Kolor odłamków | akcent zamieniony hex → rgba: w rdzeniu alfa = przezroczystość + 0,18 (max 0,92), na brzegu − 0,10; wartości przycięte do 0–1, alfa z 3 miejscami po kropce |
| Mgła matowego szkła | dwa radial-gradienty (w 20%/10% i 80%/90%) z białym o alfa × 0,20 i × 0,08 — delikatne zmętnienie jak po piaskowaniu |
| Baza | liniowy gradient pod zadanym kątem (0–360°) między „Kolorem bazowym 1” a „Kolorem bazowym 2” — najniższa warstwa |
| Losowość | mt_srand(ziarno) na wejściu — to samo ziarno odtwarza identyczny obraz (determinizm); x/y/r odłamków z mt_rand |
| Rozmycie | filter: blur(0–24 px) doklejany do klasy tylko, gdy wartość > 0 |
| Klasa wyniku | .fractal-glass-bg: background-size: cover, bez powtarzania, pozycja wyśrodkowana — wklejasz do CSS i dodajesz klasę do sekcji |
Nazwa „fraktal” jest tu inspiracją, nie algorytmem: kod nie liczy żadnej rekurencji (to nie drzewo ani krzywa Kocha), tylko składa warstwy gradientów w kryształkową kompozycję. Prawdziwe fraktale — płatek śniegu, romanesco, linia brzegowa, pęcherzyki płucne — łączy samopodobieństwo: ta sama struktura powtarza się w kolejnych skalach, od bliskiego planu po mikroskop.
Warto wiedzieć — gradientowe tła w praktyce
Glassmorphism
Efekt wpisuje się w trend „mrożonego szkła” w UI: kolorowy gradient + rozmycie + półprzezroczyste warstwy. Jako tło sekcji wklej klasę 1:1; jeśli karta ma leżeć na takim tle, półprzezroczyste tło karty plus backdrop-filter: blur() dadzą prawdziwe „szkło”.
Deterministyczne ziarno
Losowość jest zapieczętowana: mt_srand(ziarno) na wejściu oznacza, że to samo ziarno odtworzy identyczny obraz. Zapisz seed przy logo w brandbooku — kompozycję przywrócisz w roku 2030 bez zrzutu PNG.
Wydajność
Każda warstwa to pełnoekranowy gradient, a filter: blur() wymusza rastrowanie w GPU. Na słabszych telefonach ogranicz gęstość i rozmycie albo zmniejsz obszar tła — renderuj efekt na sekcji hero, nie na całej stronie.
Dostępność
Tło zostaw tłem: treść na nim musi mieć kontrast co najmniej 4,5:1 (WCAG AA). Jeśli gradient jest żywy, przykryj go półprzezroczystą warstwą pod tekstem — zamiast osłabiać kolory przy każdym dadzeniu (parametr przezroczystości służy właśnie temu).
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)).