Generator gradientów

Dostęp do narzędzi grafikit.pl wymaga konta z aktywnym okresem próbnym lub subskrypcją — szczegóły znajdziesz na stronie Konto, okres próbny i subskrypcja. Samo narzędzie otwierasz pod adresem /gradienty.php.

Do czego służy generator

Generator układa płynne przejście z kilku kolorów — dodanych ręcznie lub wyciągniętych ze zdjęcia — w jednym z trzech typów: liniowym, radialnym lub stożkowym. Wynik widzisz na żywo w podglądzie wraz z gotowym kodem CSS. Możesz pobrać go jako plik PNG w jednym z ośmiu gotowych formatów (albo we własnym rozmiarze) lub jednym kliknięciem przekazać do edytora napisów na zdjęciach jako tło dokumentu.

Szybki start

1. Otwórz Generator gradientów tła. Na starcie lista kolorów jest pusta (licznik Kolory gradientu (0)), a pod podglądem widnieje komunikat „Dodaj co najmniej 2 kolory, aby zobaczyć gradient.”.
2. Dodaj kolory: wybierz kolor w polu Dodaj kolor ręcznie i kliknij + Dodaj kolor (powtórz dla każdego koloru), albo wgraj zdjęcie w polu Przeciągnij i upuść zdjęcie.
3. Po dodaniu drugiego koloru pojawia się gradient i komunikat „Gotowe — pobierz PNG albo skopiuj kod CSS.”.
4. Wybierz Typ gradientu i ustaw Kąt przejścia.
5. Wybierz Format tła (rozmiar eksportu) — jeden z gotowych albo własną szerokość i wysokość.
6. Kliknij Pobierz PNG, Kopiuj kod CSS albo Użyj w edytorze napisów.

Kolory ze zdjęcia

Przeciągnij i upuść zdjęcie

Pole z podpisem „wyciągniemy z niego 4 dominujące kolory — albo dodaj kolory ręcznie poniżej”. Przeciągnij na nie zdjęcie (JPG, PNG lub WebP) albo kliknij i wybierz plik; z klawiatury pole otwierasz klawiszami Enter lub Spacja. Przetwarzany jest tylko pierwszy z wybranych plików.

Co dzieje się po wgraniu zdjęcia:

1. W linii statusu pojawia się „Analizuję kolory zdjęcia…”.
2. Zdjęcie jest zmniejszane do próbki 80×80 px (przycinane do środka), a piksele grupowane w koszyki kolorów. Pomijane są piksele przezroczyste. Wybierane są cztery najczęstsze kolory, odległe od siebie na tyle, by uniknąć niemal identycznych odcieni; przy bardzo jednolitym obrazie narzędzie uzupełni listę najczęstszymi kolorami mimo podobieństwa.
3. Dotychczasowa lista kolorów zostaje zastąpiona tymi czterema kolorami, równomiernie rozłożonymi od 0% do 100%. Dalej możesz je dowolnie zmieniać, usuwać i dodawać kolejne.

Pliki innych typów niż JPG, PNG i WebP są po prostu pomijane (bez komunikatu). Gdy obrazu nie da się odczytać, zobaczysz „Nie udało się wczytać tego pliku.”, a gdy nie da się wyciągnąć kolorów: „Nie udało się rozpoznać kolorów tego zdjęcia — spróbuj inne.”

Kolory dodawane ręcznie i ich pozycje

Dodaj kolor ręcznie

Próbka koloru (domyślnie #FE9923) z przyciskiem + Dodaj kolor. Przycisk dodaje wybrany kolor na koniec listy. Podpowiedź: „Minimum 2 kolory. Dla czytelnego przejścia zalecamy 2–5.”. Maksymalnie możesz mieć 8 kolorów — po ich osiągnięciu kolejne kliknięcia nic nie robią (bez komunikatu).

Kolory gradientu (liczba)

Lista dodanych kolorów z licznikiem w etykiecie. Każdy wiersz zawiera cztery elementy opisane niżej.

Próbka koloru w wierszu (aria: „Kolor gradientu”)

Kliknięcie otwiera wybór koloru; zmiana odświeża podgląd i kod CSS od razu.

Pole kodu HEX (tylko do odczytu)

Pokazuje kod koloru wielkimi literami. Nie można w nim pisać — kolor zmieniasz próbką obok.

Suwak pozycji (0–100%)

Przesuwa kolor wzdłuż gradientu; wartość w procentach widać obok. Kolejność kolorów w liście nie ma znaczenia — przy budowie gradientu są sortowane według pozycji. Podpowiedź: „Przeciągnij suwak przy kolorze, aby zmienić jego pozycję w przejściu.”

Przycisk „×” (aria: „Usuń ten kolor”)

Usuwa kolor z listy. Można usunąć wszystkie kolory (wtedy generator wraca do stanu pustego).

Jeśli masz tylko jeden kolor, podgląd jest jednolity, kod CSS to sam kolor, a przycisk Pobierz PNG jest wyłączony („Dodaj jeszcze jeden kolor, aby powstał gradient.”).

Typ gradientu

Trzy przyciski w grupie Typ gradientu (aktywny jest wyróżniony; domyślnie Liniowy):

Kąt przejścia

Kąt przejścia

Suwak 0–360° co 1°, domyślnie 135°; aktualna wartość jest widoczna obok etykiety. Dla gradientu liniowego to kierunek przejścia (jak w CSS: 0° — od dołu do góry, 90° — od lewej do prawej, 180° — od góry do dołu). Dla stożkowego to kąt, od którego rozpoczyna się obrót kolorów. Dla radialnego cały suwak jest ukryty.

Format tła (rozmiar eksportu)

Osiem gotowych przycisków formatu (domyślnie 1:1). Rozmiar dotyczy eksportu PNG i przekazania do edytora; podgląd zmienia proporcje i pokazuje wymiary pod sobą (np. „1080 × 1080 px”).

Własna szerokość (px) / Własna wysokość (px)

Dwa pola liczbowe (domyślnie 1080 × 1080). Dopuszczalny zakres to 16–8000 px na bok; wartości spoza zakresu są automatycznie korygowane do granicy, a puste lub niepoprawne pole daje 1080. Wpisanie wartości odznacza aktywny przycisk formatu. Kliknięcie przycisku formatu wypełnia oba pola jego wymiarami. Podpowiedź: „Wpisz dowolny rozmiar (16–8000 px na bok) albo wybierz gotowy format powyżej.”

Podgląd, kod CSS i status

• Podgląd — duże pole z gradientem w proporcjach wybranego formatu, odświeżane na żywo przy każdej zmianie koloru, pozycji, typu, kąta i formatu.
• Podpis pod podglądem — wymiary eksportu, np. „1080 × 1080 px”.
• Kod CSS — ramka z gotową deklaracją, np. background: linear-gradient(135deg, #FE9923 0%, #111111 100%);. Gdy nie ma żadnego koloru, ramka pokazuje „/* dodaj co najmniej 2 kolory */”. Kod nie zawiera rozmiaru — tylko samo przejście.
• Status (linia pod przyciskami) — informuje o następnym kroku: „Dodaj co najmniej 2 kolory, aby zobaczyć gradient.”, „Dodaj jeszcze jeden kolor, aby powstał gradient.” lub „Gotowe — pobierz PNG albo skopiuj kod CSS.”, a także komunikaty błędów opisane niżej.

Kopiuj kod CSS

Przycisk Kopiuj kod CSS kopiuje do schowka tekst z ramki kodu, czyli całą linię background: …;. Jest aktywny już od jednego koloru (wtedy kopiuje background: #RRGGBB;). Po kliknięciu etykieta na 1,8 s zmienia się na „Skopiowano!” albo „Nie udało się skopiować”. Gdy przeglądarka nie udostępnia nowoczesnego schowka, narzędzie próbuje starszej metody kopiowania.

Pobierz PNG

1. Przycisk Pobierz PNG jest nieaktywny, dopóki nie masz co najmniej 2 kolorów.
2. Po kliknięciu gradient jest rysowany w pełnym rozmiarze wybranego formatu i zapisywany jako plik gradient-grafikit-SZEROKOŚĆxWYSOKOŚĆ.png, np. gradient-grafikit-1080x1080.png.

Przy gradiencie stożkowym starsze przeglądarki mogą nie obsługiwać rysowania takiego gradientu na płótnie — pojawi się komunikat: „Twoja przeglądarka nie eksportuje gradientu stożkowego do PNG — kod CSS nadal zadziała.”. Gdy wygenerowanie pliku się nie powiedzie: „Nie udało się wygenerować pliku PNG.”. Bardzo duże rozmiary (np. 8000 × 8000 px) mogą przekraczać możliwości pamięci przeglądarki.

Użyj w edytorze napisów

Przycisk Użyj w edytorze napisów (wyróżniony kolorem akcentu) przenosi aktualny gradient do edytora napisów na zdjęciach jako tło nowego dokumentu.

1. Ustaw co najmniej 2 kolory, typ, kąt i Format tła (rozmiar eksportu) — rozmiar gradientu stanie się rozmiarem dokumentu w edytorze. Bez 2 kolorów zobaczysz komunikat „Dodaj co najmniej 2 kolory.”.
2. Kliknij Użyj w edytorze napisów. Generator rysuje gradient w pełnym rozmiarze, zapisuje go tymczasowo w pamięci karty przeglądarki (sessionStorage) i przechodzi na stronę edytora napisów.
3. Edytor otwiera nowy dokument o tym rozmiarze z gradientem jako nieruchomym tłem. Możesz od razu dodawać napisy, kształty i inne warstwy.

Wejście z edytora (tryb powrotu)

Gradient możesz też zacząć w edytorze: w oknie Nowy dokument ustaw Tło na Gradient (z generatora) i kliknij Utwórz, albo w panelu tła edytora użyj przycisku Edytuj gradient w generatorze…. Generator otworzy się z adresem zawierającym ?edytor=1 oraz rozmiar dokumentu: pola Własna szerokość (px) i Własna wysokość (px) są wtedy wypełnione, a nad podglądem pojawia się komunikat: „Tworzysz tło dla edytora napisów. Ustaw kolory, typ, kąt i rozmiar, a potem kliknij „Użyj w edytorze napisów”.” Po kliknięciu przycisku wracasz do edytora; jeśli wyszedłeś z istniejącego projektu przyciskiem Edytuj gradient w generatorze…, projekt zostaje przywrócony, a tło zastąpione nowym gradientem.

Komunikat „Gradient jest za duży, aby przekazać go do edytora. Zmniejsz rozmiar albo pobierz PNG.”

Przeglądarka nie pozwoliła zapisać tak dużego obrazu w pamięci karty. Wybierz mniejszy format albo pobierz PNG i wczytaj go w edytorze przyciskiem Zdjęcie tła.

Rozmiary powyżej 4096 px

Generator pozwala na 8000 px na bok, ale edytor ogranicza największy bok dokumentu do 4096 px — dla większych gradientów użyj mniejszego rozmiaru.

Ograniczenia

• Od 2 do 8 kolorów (zalecane 2–5). Brak ręcznego wpisywania kodu HEX w liście kolorów (pole jest tylko do odczytu) — kod wybierasz w próbce koloru.
• Jeden gradient naraz. Nie ma zapisu projektów, cofania ani historii; stan znika po odświeżeniu strony.
• Kolory ze zdjęcia: zawsze cztery, bez możliwości zmiany liczby. Zdjęcie z dużą ilością przezroczystości lub bardzo jednolite może dać kolory podobne do siebie.
• Radialny gradient jest zawsze okrągły, ze środkiem na środku obrazu; nie ma ustawienia położenia środka ani kształtu.
• Eksport PNG bez przezroczystości (pełne kolory). Gradient stożkowy w PNG wymaga przeglądarki z obsługą createConicGradient.
• Rozmiar eksportu: 16–8000 px na bok.
• Przycisk Użyj w edytorze napisów korzysta z pamięci karty przeglądarki (sessionStorage) — w trybie prywatnym lub przy zablokowanych danych strony może się nie powieść.

Typowe scenariusze

Jak zrobić gradient pod post na Instagram i użyć go w edytorze napisów

1. W generatorze gradientów kliknij format 1:1 (1080 × 1080 px) lub 4:5 (1080 × 1350 px) dla posta w pionie.
2. Dodaj dwa kolory marki przyciskiem + Dodaj kolor (np. pomarańcz #FE9923 i ciemny #111111). Opcjonalnie dodaj trzeci kolor.
3. Wybierz Typ gradientu Liniowy i ustaw Kąt przejścia (np. 135°). Sprawdź podgląd.
4. Kliknij Użyj w edytorze napisów.
5. W edytorze zobaczysz nowy dokument o rozmiarze gradientu z gradientem jako tłem. Dodaj napis i wyeksportuj grafikę — szczegóły w dokumencie Edytor napisów na zdjęciach.

Tło w kolorach zdjęcia

1. Przeciągnij zdjęcie na pole Przeciągnij i upuść zdjęcie.
2. Sprawdź cztery wybrane kolory i usuń przyciskiem „×” te, które Ci nie pasują. Po usunięciu pozostałe kolory zostaną rozłożone równomiernie.
3. Wybierz typ (np. Radialny daje efekt rozświetlenia od środka), ustaw format i kliknij Pobierz PNG.

Gradient do strony internetowej

1. Ustaw kolory, typ i kąt, patrząc na podgląd.
2. Kliknij Kopiuj kod CSS i wklej linię background: …; do reguły CSS wybranego elementu.
3. Kolory marki możesz wcześniej przygotować w generatorze palet kolorów.

Baner panoramiczny lub tło prezentacji

1. Wybierz format 2,35:1 (1920 × 817 px) na baner albo 16:9 (1920 × 1080 px) na prezentację.
2. Jeśli potrzebujesz innego rozmiaru, wpisz go w polach Własna szerokość (px) i Własna wysokość (px).
3. Pobierz PNG i wstaw go jako tło w programie do prezentacji lub w edytorze napisów.

Tło pod logo wektorowe

Wygeneruj gradient i użyj go w edytorze jako tła, a logo przygotuj w konwerterze do SVG i wczytaj w edytorze jako warstwę obrazu.

Rozwiązywanie problemów

Przycisk „Pobierz PNG” jest nieaktywny

Masz mniej niż 2 kolory. Dodaj kolejny.

Nie mogę dodać kolejnego koloru

Osiągnięto limit 8 kolorów. Usuń któryś przyciskiem „×”.

Moje ustawienia pozycji zniknęły

Dodanie lub usunięcie koloru zawsze rozkłada pozycje równomiernie — ustaw suwaki pozycji na końcu.

Wgrane zdjęcie nic nie zmieniło

Sprawdź, czy to plik JPG, PNG lub WebP — inne typy są pomijane bez komunikatu.

Nie ma suwaka kąta

Wybrany jest typ Radialny, w którym kąt nie jest używany. Przełącz na Liniowy lub Stożkowy.

„Użyj w edytorze napisów” nie otwiera edytora

Sprawdź komunikat pod przyciskami: najczęściej brakuje drugiego koloru, rozmiar jest zbyt duży dla pamięci karty albo przeglądarka nie obsługuje gradientu stożkowego na płótnie.

PNG wygląda inaczej niż podgląd

Dla gradientu stożkowego sprawdź uwagę o obrocie w sekcji „Kąt przejścia”.

Kod CSS ma niezrozumiałe procenty

Każdy kolor ma w kodzie swoją pozycję (np. #FE9923 0%). Zmienisz ją suwakiem pozycji koloru.

Najczęstsze pytania

Czy zdjęcie jest wysyłane na serwer?

Nie. Kolory ze zdjęcia wyciągane są lokalnie w przeglądarce.

Jaką rozdzielczość ma pobrany PNG?

Dokładnie taką, jaka jest pokazana pod podglądem (np. 1080 × 1080 px) — wybraną w formacie tła lub własnymi polami.

Ile kolorów mogę użyć?

Od 2 do 8; dla czytelnego przejścia zalecane są 2–5.

Czy kod CSS zadziała w każdej przeglądarce?

Gradienty liniowe i radialne są powszechnie obsługiwane. Gradient stożkowy (conic-gradient) wymaga nowszej przeglądarki.

Prywatność

Kolory ze zdjęcia są wyciągane i gradient jest rysowany lokalnie w Twojej przeglądarce. Zdjęcia ani wygenerowane obrazy nie trafiają na serwer grafikit.pl. Przy przekazywaniu do edytora napisów gradient jest tymczasowo przechowywany w pamięci karty przeglądarki (sessionStorage) i usuwany po odczytaniu przez edytor.

Nie znalazłeś odpowiedzi? Napisz do nas przez formularz kontaktowy.