Jak zbudować swój gradient
Narzędzie działa na dwa sposoby, które wybiera się przyciskami u góry. Otwiera się na trybie zastosowania na moich obrazach, ze strefą wczytywania gotową do pracy: przeciągnij jedno lub kilka zdjęć — akceptowane są JPG, PNG, WEBP, GIF i BMP — a gradient zostanie narysowany na każdym z nich. Przy więcej niż jednym zdjęciu nad podglądem pojawiają się karty z nazwami plików do przełączania. Pod drugim przyciskiem, utworzenia tła, nic nie wczytujesz: wybierasz kolory, typ gradientu i rozmiar, a obraz powstaje od ręki.
Gradient ma cztery typy. Liniowy prowadzi przejście po prostej, z kątem na suwaku według tej samej konwencji co w CSS, gdzie 0 stopni wskazuje w górę. Promienisty zaczyna od środka i rozchodzi się kołem. Stożkowy obraca kolory wokół punktu centralnego i daje ten wachlarzowy efekt widywany na nowoczesnych tłach. Brak wyłącza gradient całkowicie: na twoich zdjęciach obraz przechodzi nietknięty i dostaje tylko wykończenia, a w trybie tworzenia tła pierwszy kolor staje się jednolitą barwą. Kolory znajdują się tuż poniżej: każdy wiersz ma własny próbnik, regulator pozycji w procentach i przycisk usuwania. Można użyć od dwóch do sześciu punktów koloru, a przycisk dodawania wstawia nowy między istniejące. Kto woli zacząć od czegoś gotowego, znajdzie w siatce palet dwanaście sprawdzonych zestawień, a przycisk losowego gradientu przy każdym kliknięciu dobiera nowe kolory i nowy kąt.
Sześć tekstur nakłada się na gradient, a ich siła jest regulowana. Ziarno filmowe dodaje monochromatyczne ziarno: zmienia tylko jasność pikseli i zostawia kolor w spokoju, a jest podstawowym środkiem przeciw pasom pojawiającym się na gładkich gradientach. Szum kolorowy robi dokładnie odwrotnie: zmienia tylko kolor i zachowuje jasność, dając wygląd zdjęcia z wysokim ISO. Linie rysują ukośne kreski, a Kropki układają równą siatkę — jedno i drugie przydaje się do teł ze wzorem graficznym. Papier łączy miękkie ziarno z lekkim przyciemnieniem krawędzi, jak papier drukowany. Poza teksturami są dwa wykończenia. Winieta stopniowo przyciemnia wszystkie cztery krawędzie i prowadzi wzrok do środka. Gradient boczny robi to samo po jednej stronie — u góry, na dole, po lewej albo po prawej — i ma cztery typy: przyciemnić pod jasny tekst, rozjaśnić pod ciemny, wziąć pierwszy kolor gradientu albo wygasić krawędź do przezroczystości. Regulatory zasięgu i siły określają, jak daleko sięga pas i jak mocno się kładzie. Oba nakładane są na końcu, po całej reszcie, więc zachowują się tak samo w obu trybach, a tryb mieszania ich nie zmienia.
W trybie tworzenia tła wybierz jeden z sześciu gotowych rozmiarów — Full HD, kwadrat, relacja, miniatura, Open Graph albo tapeta — lub wpisz szerokość i wysokość we własnych polach, do 6000 px na bok. Blok kodu CSS pokazuje deklarację odpowiadającą bieżącemu gradientowi, a przycisk kopiuje całość do schowka, gotową do wklejenia w arkusz stylów. Na koniec wybierz PNG, JPG albo WEBP i pobierz obraz; w trybie nakładki z kilkoma zdjęciami przycisk pobrania wszystkich odda partię w jednym pliku .zip.
Najczęstsze pytania
Czy obrazy, które wczytuję, są gdzieś zapisywane?
Nie. Gradient rysowany jest w przeglądarce, a obrazy w trybie nakładki nigdy nie wędrują przez internet. Nic nie zostaje zapisane na serwerze.
Czy muszę wczytać obraz, żeby skorzystać z narzędzia?
Nie. W trybie tworzenia tła wybierasz tylko kolory i rozmiar, a plik powstaje od razu. Wczytywanie obrazów potrzebne jest wyłącznie w trybie nakładki, gdzie gradient rysowany jest na twoich zdjęciach.
Czym różni się pobranie obrazu od skopiowania CSS?
CSS tworzy gradient na żywo w przeglądarce odwiedzającego, bez pobierania jakiegokolwiek pliku: to najlżejsza opcja, o zerowym koszcie transferu, idealna do teł sekcji i przycisków. PNG albo JPG staje się potrzebny tam, gdzie CSS nie działa: okładka relacji, miniatura filmu, slajd prezentacji czy tapeta pulpitu. Warto pamiętać: tekstura istnieje tylko w wyeksportowanym obrazie, bo gradienty CSS nie mają ziarna.
Jaki rozmiar wybrać dla każdego serwisu społecznościowego?
Gotowe ustawienia pokrywają najczęstsze przypadki: 1080×1080 na kwadratowy post na Instagramie lub Facebooku, 1080×1920 na relacje i Reels, 1280×720 na miniaturę YouTube, 1200×630 na obrazek Open Graph pokazywany na WhatsAppie i LinkedIn, 1920×1080 na slajdy i 2560×1440 na tapetę. Dla każdego innego wymiaru wpisz szerokość i wysokość we własnych polach, do 6000 px na bok.
Po co ziarno na gradiencie?
Gładkie gradienty na ekranach 8-bitowych często pokazują widoczne pasy barwne — wadę zwaną bandingiem, tym silniejszą, im bliżej siebie są oba kolory. Cienka warstwa ziarna między 20% a 40% rozbija te pasy i sprawia, że przejście czyta się jako ciągłe. Do tego ziarno daje to drukarskie wykończenie, które upowszechniło się w identyfikacji wizualnej i na okładkach projektów.
Jak nałożyć gradient na zdjęcie, nie tracąc tego, co na nim widać?
Wybierz tryb nakładki i zacznij od krycia między 40% a 60%. Tryby mieszania mocno zmieniają wynik: mnożenie przyciemnia i nadaje się pod jasny tekst, ekran rozjaśnia, a kolor tonuje zdjęcie zachowując jego pierwotny kontrast — ten tryb ratuje najwięcej detali. Przy okładce z nagłówkiem ciemny gradient w mnożeniu przy dolnej krawędzi utrzymuje tekst czytelnym, nie zasłaniając obrazu.
Czy mogę użyć samej tekstury albo winiety, bez gradientu?
Tak. Wybierz Brak w pierwszej opcji, przy typie gradientu. Na twoich zdjęciach obraz przechodzi nietknięty i dostaje tylko to, co włączysz dalej — ziarno, winietę albo gradient boczny. Dzięki temu można nadać zdjęciu filmowe wykończenie, nie ruszając jego kolorów. W trybie tworzenia tła Brak bierze pierwszy kolor jako jednolitą barwę, co przydaje się do gładkiego tła z ziarnem.
Czym różni się ziarno filmowe od szumu kolorowego?
Oba rozrzucają losową zmienność po pikselach, ale wzdłuż przeciwnych osi. Ziarno filmowe zmienia tylko jasność i zostawia kolor nietknięty, odtwarzając ziarno fotograficzne — to ono rozbija widoczne pasy gładkich gradientów. Szum kolorowy robi odwrotnie: zmienia tylko kolor i zachowuje jasność, dając kolorowe cętki jak na zdjęciu z wysokim ISO. W praktyce: ziarno jako wykończenie i przeciw bandingowi, szum kolorowy gdy szukasz analogowego lub starekranowego charakteru.
Po co winieta i jaka siła jest rozsądna?
Winieta stopniowo przyciemnia krawędzie i przesuwa uwagę ku środkowi obrazu: klasyka fotografii i okładek filmowych, gdzie twarz albo produkt konkuruje z tłem. Między 30% a 50% efekt jest subtelny i nie rzuca się w oczy, co zwykle jest optymalne; powyżej 70% staje się oczywisty i nabiera dramatycznego tonu. Ponieważ winieta rysowana jest na końcu, po gradiencie, wybrany tryb mieszania nie ma na nią wpływu.
Jak przyciemnić tylko dół zdjęcia, żeby umieścić nagłówek?
Włącz gradient boczny i wybierz krawędź po tej stronie, gdzie stanie tekst, zostawiając typ na przyciemnianiu. Domyślnie ustawiona jest lewa, co pokrywa najczęstszy przypadek banera z nagłówkiem po lewej i obrazem po prawej; przy okładce filmu z tytułem na dole przełącz na dolną krawędź. Zasięg między 35% a 50% przy sile około 75% daje białemu tekstowi dość kontrastu, nie zasłaniając tematu.
Czy mogę zastosować ten sam gradient do kilku zdjęć?
Tak. W trybie nakładki wczytaj tyle obrazów, ile chcesz: te same kolory, tekstura, krycie i mieszanie zostaną zastosowane do wszystkich, a pobieranie w .zip odda całą partię. To najszybsza droga do ujednolicenia okładek bloga albo miniatur kanału.