Generator tła gradientowego online

Podgląd efektów gradientów CSS w czasie rzeczywistym, obsługa gradientów liniowych, radialnych i stożkowych, generowanie kodu i eksport obrazów 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 ustaw gradient, potem skopiuj kod lub wyeksportuj obraz. Obsługuje gradienty liniowe, radialne, stożkowe, powtarzane i wielokolorowe punkty; zmiany parametrów aktualizują podgląd po prawej.

Ustaw gradient

Najpierw wybierz typ gradientu, potem dostosuj kierunek i punkty koloru. Zaleca się układać punkty koloru rosnąco.

Typ gradientuGradient stożkowy nadaje się do palet kątowych i teł pierścieniowych

Kierunek i kształtGradient liniowy może używać kąta lub szybkiego kierunku

Kąt liniowy90°

Cykl powtarzania32%

Kształt radialny

Zakres rozmycia

Cykl powtarzania32%

Środek X50%

Środek Y50%

Kąt początkowy0°

Środek X50%

Środek Y50%

Powtarzaj gradient Warstwa miękkiego światła Winieta Drobna tekstura

Punkty koloruObsługuje 2–10 punktów, z przezroczystością i pozycją

SzablonyUżyj jako punktu startowego palety

Eksport kodu

Po sprawdzeniu podglądu skopiuj CSS lub eksportuj pliki PNG, JPG, SVG, CSS i pakiet zasobów.

Format koduWybierz deklarację dla scenariusza dev

Tryb kodu

Klasa / zmienna

Uwzględnij kolor tła awaryjny Kompresuj kod

Kod CSS

Rozmiar obrazuNiestandardowy rozmiar będzie użyty do eksportu obrazów i SVG

Presety rozmiaru

Jakość JPG92%

Szerokość (px)

Wysokość (px)

Pobierz zasobyPakiet zawiera CSS, SVG, PNG i JSON ustawień

Podgląd na żywo

Gradient Preview Zmiany parametrów aktualizują od razu

TypLiniowa

Punkty koloru2

Rozmiar eksportu1920x1080

Długość kodu0

Instrukcje

Instrukcja obsługi oprogramowania

Ustaw typ gradientu: wybierz gradient liniowy, radialny lub stożkowy. Liniowy sprawdza się w banerach i tłach stron, radialny w efektach rozchodzenia się od środka, a stożkowy w pierścieniach, kołach kolorów i wzorach dekoracyjnych.
Dostosuj kierunek i kształt:
- Gradient liniowy: możesz użyć przycisków kierunku albo ustawić kierunek od 0 do 360 stopni za pomocą suwaka kąta.
- Gradient radialny: możesz ustawić kształt koła lub elipsy, zakres rozchodzenia oraz pozycję punktu środkowego X/Y.
- Gradient stożkowy: możesz ustawić kąt początkowy i pozycję punktu środkowego.
Konfiguruj punkty kolorów: kontroluj każdy punkt koloru za pomocą próbnika kolorów, pola HEX, procentowej pozycji i parametrów przezroczystości. Możesz dodawać, usuwać, sortować i odwracać kolory, a także jednym kliknięciem równomiernie rozmieścić punkty.
Użyj opcji efektów: możesz włączyć powtarzający się gradient, warstwę miękkiego światła, winietę i drobną teksturę, aby tło lepiej pasowało do sekcji hero strony, kart, plakatów i materiałów projektowych.
Kopiuj i eksportuj: w sekcji „Eksport kodu” wybierz nazwę klasy CSS, tryb samych deklaracji lub zmiennych CSS. Możesz skopiować kod CSS albo wyeksportować pliki PNG, JPG, SVG, CSS oraz pakiet zasobów ZIP.
Zapisz i udostępnij: w sekcji „Zapisz i udostępnij” zapisz bieżące ustawienia, wygeneruj link do udostępnienia albo wklej istniejący kod gradientu CSS, aby wczytać go do narzędzia i kontynuować edycję.

Najczęściej zadawane pytania

Odpowiedź: gradient liniowy przechodzi wzdłuż linii prostej i nadaje się do teł stron, przycisków oraz banerów; gradient radialny rozchodzi się od punktu środkowego na zewnątrz i sprawdza się w efektach reflektora oraz warstwowych tłach; gradient stożkowy obraca się wokół środka i nadaje się do kół kolorów, pierścieni oraz efektów dekoracyjnych.

Odpowiedź: kliknij „Dodaj kolor”, aby dodać punkt koloru, a następnie osobno ustaw kolor, procentową pozycję i przezroczystość. Pozycja punktów wpływa na zakres przejścia kolorów; możesz też użyć opcji „Równomierne rozmieszczenie”, aby szybko uporządkować punkty.

Odp.: Powtarzające się gradienty nadają się do tworzenia regularnych teł, takich jak paski, fale czy pierścieniowe powtarzalne tekstury. Dla gradientów liniowych i radialnych można włączyć tryb powtarzania, a w przypadku gradientów stożkowych zaleca się sterowanie efektem za pomocą punktów kolorów i kątów.

Odp.: Można eksportować pliki PNG, JPG, SVG i CSS, a także pobrać pakiet zasobów ZIP. Pakiet zawiera kod CSS, plik SVG, obraz PNG oraz ustawienia JSON, co ułatwia archiwizację i późniejszą edycję.

Odp.: Po skopiowaniu wygenerowanego kodu CSS wystarczy wkleić go do pliku stylów strony. Narzędzie oferuje trzy tryby: nazwę klasy CSS, same deklaracje oraz zmienne CSS, które można wybrać zgodnie ze zwyczajami projektu.

Odp.: Tak. W sekcji „Zapisz i udostępnij”, w obszarze „Importuj CSS”, wklej kod linear-gradient, radial-gradient lub conic-gradient, a następnie kliknij „Wczytaj do narzędzia”, aby dalej dostosowywać kolory, kąt i pozycję.

Odp.: Nie. Generowanie gradientów, kopiowanie kodu, rysowanie obrazów i pakowanie zasobów odbywa się lokalnie, bez potrzeby przesyłania treści projektu na serwer.