Przejdź do treści

Grafiki: banery, memy, kolaże

Generator gradientu i tła

Wybierz gotowy zestaw kolorów albo ułóż własny gradient, dodaj ziarno i pobierz tło w rozmiarze posta, relacji albo dowolnym. Możesz też położyć na nim zrzut ekranu w ramce okna lub telefonu.

Za darmoBez logowaniaDziała w przeglądarcePliki zostają na urządzeniu

Gradient

Co tworzysz

Gotowe zestawy

Liczba obok koloru to jego pozycja na gradiencie w procentach.

Podgląd

Ziarno i zrzut ekranu są tylko w pliku PNG/JPG, kod CSS opisuje sam gradient.

Dalej: Baner i okładka Makieta posta Paleta kolorów Okładki wyróżnionych

Ten generator gradientu robi dwie rzeczy naraz: gotowy obraz tła w rozmiarze posta, relacji albo dowolnym oraz kod CSS tego samego gradientu do strony internetowej. Masz 16 gotowych zestawów kolorów, trzy rodzaje przejść (liniowe, kołowe i stożkowe) i od 2 do 4 kolorów. W drugim trybie położysz na tle zrzut ekranu - w ramce okna przeglądarki albo telefonu, z cieniem i zaokrąglonymi rogami - co przydaje się przy pokazywaniu aplikacji, opinii klientów czy wyników w relacji.

Jak używać

  1. Kliknij gotowy zestaw albo wybierz rodzaj gradientu i kolory. Liczba obok koloru to jego pozycja na przejściu (0-100%).
  2. Ustaw kąt (dla gradientu liniowego i stożkowego) i opcjonalnie ziarno - delikatny szum, który zmniejsza widoczne pasy na ekranach i po kompresji.
  3. Wybierz format pliku: post 4:5, kwadrat, relacja 9:16, obraz poziomy, tapeta 4K albo własny rozmiar.
  4. Pobierz PNG albo JPG, a jeśli potrzebujesz tła na stronę - skopiuj kod CSS.
  5. Do zrzutu ekranu przełącz tryb na „Tło do zrzutu ekranu”, wybierz plik i ramkę, a potem dobierz margines, zaokrąglenie i cień.

Generator gradientu: CSS i obraz w jednym

Gradient w CSS opisuje się jedną linijką. Narzędzie rysuje obraz według tych samych zasad co przeglądarka, więc plik PNG i kod CSS wyglądają tak samo:

RodzajPrzykład koduKiedy używać
Liniowylinear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)Tła postów, przyciski, nagłówki. Kąt 0deg biegnie do góry, 90deg w prawo.
Kołowyradial-gradient(circle at 50% 50%, #7c3aed 0%, #1e1b4b 100%)Efekt reflektora i winiety - jaśniejszy środek przyciąga wzrok do tekstu.
Stożkowyconic-gradient(from 0deg at 50% 50%, …)Kolory dookoła środka, jak na kole barw; dobry jako abstrakcyjne tło.

Gradient stożkowy rysują aktualne wersje Chrome, Edge, Safari i Firefoksa. W starszej przeglądarce podgląd pokaże przejście liniowe, ale kod CSS pozostanie poprawny. Ziarna i zrzutu ekranu nie da się zapisać w samym CSS - są tylko w pobranym obrazie.

Jak dobrać kolory gradientu

  • Sąsiednie barwy. Fiolet z różem albo niebieski z turkusem przechodzą płynnie. Kolory z przeciwnych stron koła barw (np. czerwony i zielony) dają w środku szarobrązowe przejście.
  • Kolory marki. Jeśli masz logo lub zdjęcie w kolorach firmy, wyciągnij je w narzędziu paleta kolorów ze zdjęcia i wpisz tutaj.
  • Tekst na tle. Na jasnym gradiencie ciemny tekst, na ciemnym jasny. Sprawdź, czy napis jest czytelny w najjaśniejszym i najciemniejszym miejscu - pomoże w tym sprawdzanie kontrastu kolorów.
  • Pasy na gradiencie. Na dużych, gładkich przejściach widać czasem schodki (banding), zwłaszcza po kompresji JPG w aplikacjach. Ziarno na poziomie 4-8% zwykle je ukrywa.

Tło do zrzutu ekranu

Surowy zrzut ekranu w relacji albo poście wygląda przypadkowo. Na kolorowym tle, z marginesem, zaokrąglonymi rogami i cieniem nabiera charakteru prezentacji. Ramka „Okno przeglądarki” dodaje pasek z trzema kropkami i polem adresu (rysowanym, bez prawdziwego adresu), a „Telefon” - ciemną obudowę z wycięciem na aparat. Zanim pobierzesz plik, zasłoń dane, których nie chcesz pokazywać (np. adres e-mail, numer zamówienia), bo narzędzie nie rozpoznaje treści zrzutu.

Gotowe tło przyda się też jako podkład pod napis w generatorze napisów na zdjęciu albo jako tło banera w kreatorze banerów i okładek.

Najczęstsze pytania

Jak zrobić tło gradientowe na relację?

Wybierz zestaw kolorów albo własne kolory, ustaw format „Relacja 9:16 (1080 × 1920)” i pobierz PNG. W aplikacji Instagrama dodaj ten obraz jako relację i napisz na nim tekst albo naklejkę.

Jak skopiować kod CSS gradientu?

Kliknij „Kopiuj CSS”. W schowku znajdzie się linia background: linear-gradient(…); którą wklejasz do arkusza stylów, np. w opcjach motywu WordPressa albo w kodzie elementu.

Czym różni się gradient liniowy od kołowego?

Liniowy przechodzi z koloru w kolor wzdłuż prostej pod wybranym kątem. Kołowy zaczyna się w środku i rozchodzi się na boki - środek jest wyróżniony, a brzegi ciemniejsze lub jaśniejsze, jak w winiecie.

Jak wstawić zrzut ekranu w ramkę telefonu?

Przełącz tryb na „Tło do zrzutu ekranu”, wybierz plik i ustaw ramkę „Telefon”. Przy wysokim, pionowym zrzucie narzędzie samo ją wybierze, jeśli nie ustawisz innej ramki. Margines i cień ustawisz suwakami, a gotowy obraz pobierzesz jako PNG lub JPG.

PNG czy JPG?

PNG zachowuje gładkie przejścia bez strat i jest lepszy do dalszej edycji. JPG waży mniej, ale przy gładkich gradientach może pokazywać pasy - wtedy dodaj trochę ziarna.

Źródła

  • MDN Web Docs: linear-gradient(), radial-gradient(), conic-gradient() oraz CanvasRenderingContext2D.createConicGradient() (obsługa w przeglądarkach), sprawdzone 19.10.2026.
  • W3C: CSS Images Module Level 3 i 4 (definicja kąta i długości linii gradientu).

Inne darmowe narzędzia

Wszystkie narzędzia