Generator Fractal Glass
Generuj efekt szklanego fraktalu (frosted/glazed glass) dla elementów UI. CSS backdrop-filter i glass morphism. Skopiuj kod. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.
-
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";
}
Generator efektu szklanego fraktalu CSS
Glass morphism to jeden z najbardziej charakterystycznych trendów UI – rozmyte, przezroczyste tło imitujące szybę matową. Generator tworzy CSS z backdrop-filter dla przycisków, kart i paneli.
Parametry efektu
Rozmycie tła (blur 4-20px), krycie warstwy (opacity 0.1-0.5), kolor tła (biały/czarny/pastelowy), obramowanie (białe semi-transparentne), cień (box-shadow), zaokrąglenie (border-radius).
Kod CSS
backdrop-filter: blur(Xpx) saturate(180%); background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); – gotowy do wklejenia z podglądem na żywo.
Najczęstsze pytania
Czy backdrop-filter działa we wszystkich przeglądarkach?
Chrome, Edge, Safari (wszystkie wersje), Firefox (od 103). IE nie obsługuje. Sprawdź caniuse.com.
Jak stworzyć glass morphism card?
Element z backdrop-filter musi być na warstwie nad elementem który rozmywa. Użyj position: relative + z-index lub isolation: isolate.
Dlaczego efekt nie działa?
Brakuje tła za elementem (coś kolorowego musi być widoczne przez szybę). Sprawdź z-index i czy rodzic nie ma overflow: hidden.
Inne efekty CSS: generator gradientów i generator blob kształtów.