DARMOWE NARZĘDZIE

Blurry Gradients

Twórz efektowne rozmyte gradienty CSS (blurry gradients) w stylu glassmorphism. Ustaw kolory, intensywność i rozmycie, a narzędzie wygeneruje gotowy kod CSS do skopiowania. 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

Kolor bazowy tła

Paleta kolorów (hex, oddzielone przecinkami)

Liczba plam (3–10)

Miękkość przejść (35–90)

Poziom rozmycia px (10–140)

Intensywność kolorów % (25–100)

Ziarno losowości (1–999999)

Wysokość podglądu px (160–520)

Wynik

Ustaw parametry i kliknij „Przetwórz", aby wygenerować gradient.

Powiązane narzędzia

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

Generator rozmytych gradientów

Generator rozmytych gradientów to narzędzie online, które pozwala tworzyć efektowne tła CSS w stylu blurry gradient lub glassmorphism. Wystarczy wybrać kolory bazowe, liczbę plam kolorystycznych i poziom rozmycia – narzędzie natychmiast wygeneruje gotowy blok CSS, który możesz skopiować do swojego projektu.

CSS gradients glassmorphism blurry background darmowe online bez rejestracji

Do czego służy

Narzędzie generuje wielowarstwowe gradienty radialne z efektem rozmycia (CSS filter: blur()). Gotowy kod CSS możesz użyć jako tło sekcji, hero, kart lub całej strony – popularny efekt stosowany w interfejsach inspirowanych stylem macOS, iOS i nowoczesnymi aplikacjami webowymi. Parametr „ziarno losowości” (seed) zapewnia pełną powtarzalność wyników.

Jak używać

1. Wybierz kolor bazowy tła (domyślnie ciemny granat). 2. Wpisz paletę kolorów plam oddzielonych przecinkami (format hex). 3. Ustaw liczbę plam (3–10), miękkość przejść, poziom rozmycia i intensywność. 4. Kliknij Przetwórz – podgląd pojawi się od razu. 5. Skopiuj CSS przyciskiem „Kopiuj CSS” i wklej do swojego arkusza stylów.

Najczęstsze pytania

Czym różni się gradient rozmyty od zwykłego gradientu CSS?

Zwykły gradient CSS (linear-gradient, radial-gradient) nie używa filtra rozmycia. Blurry gradient to technika nakładania wielu gradientów radialnych z pseudo-elementem ::before i właściwością filter: blur(), co daje efekt miękkich, organicznych plam koloru – popularny w projektach glassmorphism i neumorphism.

Czy wygenerowany CSS działa we wszystkich przeglądarkach?

Tak – użyte własności (background-image, filter: blur(), inset) są obsługiwane przez wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari, Edge). Dla starszych przeglądarek zalecamy dodanie prefiksu -webkit-filter: blur().

Jak zmienić kolor plam po wygenerowaniu?

Edytuj pole „Paleta kolorów” – wpisz nowe kolory hex oddzielone przecinkami i kliknij Przetwórz. Możesz też zmieniać parametr „Ziarno losowości” (seed), aby przy tych samych kolorach uzyskać inny układ plam.

Czy mogę użyć tego tła na elemencie div?

Tak. Skopiowany CSS używa klasy .blurry-bg. Dodaj tę klasę do dowolnego elementu HTML. Upewnij się, że element ma ustawioną wysokość lub zawartość – gradient jest renderowany przez pseudo-element ::before, który jest absolutnie pozycjonowany.