Większość generatorów gradientów daje jedynie linijkę kodu CSS. Ten renderuje gradient na prawdziwym canvasie i pozwala pobrać gotowy plik PNG w dokładnym rozmiarze w pikselach, jakiego potrzebujesz - tapeta na telefon, tło pulpitu 1920x1080, kwadratowy post na social media albo własny wymiar. Nic nie jest wysyłane na serwer: obraz jest tworzony i zapisywany w całości na Twoim urządzeniu, więc Twoje kolory i pliki pozostają prywatne.
Darmowy generator gradientów
Działa w całości w przeglądarce - bez wysyłania plików i bez rejestracji.
Typ
Rozmiar obrazu
px
Punkty przejścia
Zapisuje prawdziwy plik PNG w rozmiarze 1920×1080 px
Czym jest generator gradientów?
Generator gradientów to narzędzie, które łączy dwa lub więcej kolorów w płynne przejście i eksportuje je jako obraz do pobrania. Wybierz kolory i punkty przejścia, ustaw typ liniowy lub radialny, określ rozmiar i zapisz plik PNG jako tapetę, tło, baner lub miniaturę. Wszystko dzieje się w Twojej przeglądarce.
Jak korzystać
- 1Wybierz typ liniowy lub radialny. Liniowy łączy kolory wzdłuż prostej linii pod ustawionym kątem; radialny rozprowadza je od środka na zewnątrz w formie okręgu.
- 2Ustaw kolory i punkty przejścia. Kliknij próbkę, aby wybrać kolor, i przeciągnij suwak, by przesunąć punkt. Dodaj do 8 punktów lub usuń aż do 2, a przycisk Losuj podpowie szybki pomysł.
- 3Wybierz rozmiar obrazu. Dotknij ustawienia wstępnego (desktop, telefon, kwadrat, social media) albo wpisz własną szerokość i wysokość w pikselach. Podgląd aktualizuje się na żywo.
- 4Pobierz plik PNG. Kliknij Pobierz PNG, aby zapisać gradient jako obraz w pełnej rozdzielczości, albo skopiuj kod CSS, by użyć tego samego gradientu w kodzie.
Dla kogo
- Projektanci i twórcy treści, którzy potrzebują czystego tła z gradientem do slajdu, miniatury, banera lub relacji bez otwierania Photoshopa.
- Użytkownicy telefonów i komputerów tworzący własną tapetę z gradientem w dokładnej rozdzielczości swojego ekranu.
- Deweloperzy, którzy potrzebują lekkiego placeholdera PNG z gradientem lub obrazu hero, a także pasującego kodu CSS, by odtworzyć go w kodzie.
- Menedżerowie social media eksportujący spójne z marką tła gradientowe w rozmiarach dla postów, relacji i zdjęć w tle.
Najczęstsze pytania
Czy ten generator gradientów jest darmowy?
Tak - w 100% darmowy, bez rejestracji, bez znaków wodnych i bez limitów. Twórz i pobieraj tyle obrazów z gradientem, ile chcesz.
Czy cokolwiek jest wysyłane na serwer?
Nie. Gradient jest tworzony i zapisywany w całości w Twojej przeglądarce za pomocą canvasu. Żadne kolory, obrazy ani dane o użytkowaniu nie są nigdzie wysyłane.
W jakim formacie eksportowany jest obraz?
Eksport następuje w formacie PNG, który zachowuje gradient idealnie gładkim i bezstratnym, bez artefaktów kompresji. Plik jest zapisywany w pełnym rozmiarze w pikselach, który ustawiłeś, i gotowy do użycia jako tapeta, tło lub do przesłania.
Jaki rozmiar wybrać dla tapety z gradientem?
Dopasuj do ekranu. Popularne wybory to 1920x1080 dla większości komputerów, 1080x1920 dla telefonu w orientacji pionowej i 1080x1080 dla kwadratowego postu na social media. Możesz też wpisać dowolną własną szerokość i wysokość do 8000 pikseli.
Jaka jest różnica między gradientem liniowym a radialnym?
Gradient liniowy łączy kolory wzdłuż prostej linii pod wybranym kątem, więc kolor zmienia się w poprzek obrazu. Gradient radialny zaczyna się w punkcie centralnym i rozchodzi na zewnątrz w formie okręgu, więc kolor zmienia się od środka ku krawędziom.
Czy mogę otrzymać zarówno kod CSS, jak i obraz?
Tak. Oprócz pliku PNG do pobrania narzędzie pokazuje pasujący kod CSS background-image. Skopiuj go, aby odtworzyć dokładnie ten sam gradient na stronie lub w aplikacji zamiast używać pliku obrazu.
Jak działają punkty przejścia (color stops)?
Każdy punkt łączy kolor z pozycją od 0% do 100% wzdłuż gradientu. Przejście między sąsiednimi punktami jest płynne. Umieszczenie dwóch punktów w tej samej pozycji tworzy ostrą krawędź zamiast płynnego przejścia, co przydaje się do pasków lub blokowych teł kolorystycznych.