Generator animowanego tła gradientowego CSS

Twórz online animowane tła gradientowe, z obsługą wielu kolorów, kierunków animacji i gotowych ustawień, i generuj kod CSS jednym kliknięciem

Zgłoszenie błędu

Tryb wykonywania w przeglądarce: Twoje dane są przetwarzane w przeglądarce i nie są przesyłane na serwer.

Szybkość i stabilność: Szybkość przetwarzania zależy od urządzenia i przeglądarki. Przy dużych zadaniach wsadowych wersja desktopowa może być stabilniejsza.

Ładowanie narzędzia, czekaj...

Jeśli narzędzie online nie ładuje się lub nie działa, wypróbuj narzędzie desktopowe. https://tools.yikeaigc.com/

Użycie narzędzia

Wróć do starej wersji

Najpierw wybierz kolory, potem dostosuj animację, a na końcu skopiuj lub pobierz kod. Gotowe presety można użyć jako przykład lub dalej edytować kolory, punkty, kierunek, szybkość i cel wyjścia. Cały podgląd, generowanie i zapis odbywa się na tej stronie.

Podgląd na żywo CSS Keyframes Tekst / obramowanie / tło Ustawienia można zapisać

Liczba kolorów-

Typ animacji-

Czas trwania-

Cel wyjścia-

Ustawienia kolorów

Szybciej zacząć od presetu. Punkty kolorów wpływają na rytm przejścia gradientu; zalecane są 2–6 kolory.

Przykładowy schemat Kliknięcie zastąpi bieżące kolory

Podstawy gradientu Liniowy pasuje do tła strony, radialny do efektu reflektora, stożkowy do obramowań lub odznak

Typ gradientu

Kąt gradientu135°

135°

Środek radialny / stożkowy

Punkty kolorów Zachowaj 2 kolory, można ustawić do 8

Parametry animacji

Jako tło strony zalecana jest wolniejsza prędkość przepływu. Gdy chcesz osłabić efekt, włącz zgodność z ograniczeniem ruchu.

Typ animacji Wybierz inną logikę generowania Keyframes

Kierunek ruchu Wpływa na klatki kluczowe background-position

Prędkość i pętla Im większy rozmiar tła, tym wyraźniejszy ruch kolorów

Czas trwania animacji10s

10s

Rozmiar tła400%

400%

Krzywa animacji

Pętla nieskończona Odtwarzaj w obie strony Pauza po najechaniu Zgodność z ograniczeniem ruchu

Generuj i eksportuj

Po ustawieniu nazwy klasy i zastosowania skopiuj CSS do pliku stylów projektu, a następnie dodaj klasę do elementu docelowego.

Ustawienia aplikacji Ten sam zestaw kolorów może tworzyć efekty tła, tekstu lub obramowania

Nazwa klasy CSS

Cel wyjścia

Min. wysokość kontenera (px)

Zaokrąglenie (px)

Szerokość obramowania (px)

Tło wewnątrz obramowania

Wygenerowany kod CSS

Przykładowy HTML

Podgląd na żywo

Animated Gradient Po zmianie kolorów, kierunku i prędkości efekt aktualizuje się od razu. Idealne do sekcji hero, przycisków, stron akcji i kart wizualnych. CSS Ready

Typ gradientu-

Orientacja-

Rozmiar-

Nazwa klasy-

Instrukcje

Instrukcja obsługi oprogramowania

Wybierz schemat kolorów: w „Ustawieniach kolorów” kliknij przykładowy schemat albo ręcznie dodaj, usuń i dostosuj kolory oraz punkty przejścia.
Ustaw typ gradientu: wybierz gradient liniowy, radialny lub stożkowy, a następnie w razie potrzeby dostosuj kąt i położenie środka.
Skonfiguruj parametry animacji: w „Parametrach animacji” ustaw sposób przepływu, kierunek ruchu, czas trwania, rozmiar tła, krzywą animacji i tryb zapętlenia.
Wybierz zastosowanie wyjściowe: w „Generuj i eksportuj” wybierz kontener tła, tekst z gradientem lub obramowanie z gradientem oraz ustaw nazwę klasy CSS, zaokrąglenie, obramowanie i inne parametry.
Podgląd efektu: po prawej stronie możesz przełączać tryby podglądu tła, karty, tekstu i obramowania, a po potwierdzeniu efektu wygenerować kod.
Skopiuj lub pobierz kod: kliknij „Kopiuj CSS”, „Kopiuj HTML” lub „Pobierz CSS”, aby zastosować kod do elementów strony.
Zapisz ustawienia: kliknij „Zapisz ustawienia”, aby zachować bieżące parametry i łatwo kontynuować edycję następnym razem.

Najczęstsze pytania

Odpowiedź: Skopiuj kod CSS do pliku stylów, a następnie dodaj nazwę klasy z przykładowego HTML do elementu, na którym ma być wyświetlany gradient.

Odpowiedź: Gradient liniowy sprawdza się jako tło strony i baner; radialny nadaje się do efektów reflektora i miękkiego rozproszenia; stożkowy pasuje do obramowań, odznak i efektów wizualnych z wrażeniem obrotu.

Odpowiedź: Możesz zwiększyć rozmiar tła, dodać więcej kolorów, dostosować punkty przejścia kolorów albo wybrać animację, taką jak przepływ po przekątnej lub pulsujący przepływ.

Odpowiedź: Tak. W zastosowaniu wyjściowym wybierz „Tekst z gradientem”, a narzędzie wygeneruje kod CSS zawierający background-clip:text.

Odp.: Zwykle można go bez problemu używać jako tła strony. Jeśli na stronie jest dużo animacji, zaleca się wydłużenie czasu animacji, zmniejszenie liczby kolorów oraz włączenie kodu zgodności ograniczającego efekty ruchu.