DARMOWE NARZĘDZIE

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.

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

Base kolorów 1

Base kolorów 2

Accent kolorów

Angle

Density

Blur

Opacity

Seed

Preview height

Wynik

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

Powiązane narzędzia

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

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.

glass morphism frosted glass CSS backdrop-filter glazed glass UI

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.