Przetwarzaj do 200 obrazów na zadanie — ustaw ustawienia raz, uruchom wszystkie.
Wybierz dwa lub więcej kolorów, przeciągnij gradient według uznania, skopiuj CSS. Lub pobierz jako PNG, aby użyć jako tapety, tła slajdu lub tła posta w mediach społecznościowych. Obsługiwane są gradienty liniowe, radialne i stożkowe, a także tryb gradientu siatkowego dla miękkich, stylistycznych tła w stylu Apple, które widzisz w nowoczesnych interfejsach.
Rodzaje gradientów
- Liniowy: linia prosta od koloru A do koloru B. Wybór kierunku (góra→dół, przekątna itp.).
- Radialny: koncentryczny — kolor A w środku przechodzi w kolor B na brzegach. Przydatny do efektów reflektora.
- Stożkowy: obraca się wokół punktu centralnego jak koło kolorów. Modny w nowoczesnym projektowaniu UI.
- Siatkowy (premium): wiele plam kolorów płynnie połączonych. Efekt „gradientu Apple”.
Co możesz skopiować
- CSS: gotowa do wklejenia deklaracja
linear-gradient(...) lub background-image:.
- Tailwind: najbliższa klasa
bg-gradient-* plus dowolne dodatki kolorów.
- SVG: do skalowalnego użycia w ikonach lub grafikach UI.
- Pobieranie PNG: dowolny rozmiar, w tym tapeta na telefon (1284×2778), na pulpit (3840×2160) i kwadrat (1080×1080).
Typowe zastosowania
- Tapety na telefon: gradienty siatkowe są bardzo popularne w iOS. Wypróbuj nasze Podgląd tapety iPhone, aby przetestować.
- Tła postów w mediach społecznościowych: natychmiastowy spójny wygląd dla grafik z cytatami.
- Sekcje hero: gradientowe tła są wszędzie na stronach landingowych.
- Prezentacje slajdów: zastąp nudne jednolite tła.
Wybór kolorów, które działają
Kolory sąsiadujące na kole barw = subtelne, harmonijne. Przeciwne = odważne, przyciągające uwagę. Dodaj trzeci punkt pośrodku, aby wypełnić dużą lukę. Aby uzyskać gradienty zgodne z marką, wklej HEX marki i wybierz odcień lub cień dla drugiego punktu. Użyj naszego Konwertera kolorów, aby znaleźć odcienie (HSL z wyższą jasnością) lub cienie (niższą).
Często zadawane pytania
Czy mogę użyć ich w produkcji?
Tak — skopiowany CSS działa w każdej nowoczesnej przeglądarce. Dla starszych przeglądarek dostępne są fallbacki SVG.
A co z obsługą gradientów radialnych w przeglądarkach?
Uniwersalne w nowoczesnych przeglądarkach. Składnia CSS to jedna linia.
Jak duży mogę wyeksportować plik PNG?
Darmowe: do 4K (3840×2160). Premium: 8K i więcej.
Czy gradienty siatkowe są trudne w użyciu?
W sieci są one oparte na SVG lub canvas. Dajemy Ci spłaszczony PNG dla łatwego użycia, plus źródło SVG do edycji.
Czy mogę zapisać swoje gradienty?
Zaloguj się (za darmo), a zapisane gradienty pojawią się w twojej bibliotece.
Co to jest gradient stożkowy?
Rozchodzi się wokół punktu — jak koło kolorów lub wykres kołowy. Nowoczesny CSS obsługuje go natywnie.
Czy działa w przypadku animowanych gradientów?
Tylko eksport statyczny. W przypadku animowanych tła, skopiuj CSS i dodaj animację CSS wokół kąta gradientu.
Dlaczego po prostu nie napisać CSS ręcznie?
Możesz — narzędzie po prostu przyspiesza wizualną iterację. Kopiuj i dostosuj.
O nas Generator gradientów
Generator gradientów to darmowe narzędzie online od Wallpapers.com, które działa w całości w Twojej przeglądarce — bez instalacji, bez znaku wodnego, bez rejestracji e-mail przy pierwszej próbie.
Twórz gradienty liniowe lub radialne z możliwością kopiowania i wklejania CSS.
Jak używać Generator gradientów
- Wybierz kolor z próbki lub wklej wartość HEX / RGB.
- Dostosuj wynik — paletę, kontrast, kolory dopełniające.
- Skopiuj wartość lub wyeksportuj próbkę jako JSON.
Kiedy to stosować
Typowe przypadki użycia obejmują:
przygotowywanie obrazów do przesłania w sieci, aukcji e-commerce, platform społecznościowych z ograniczeniami formatu oraz konwersję plików między urządzeniami lub aplikacjami.
Darmowe a Premium
Każdy odwiedzający otrzymuje darmową wersję próbną; zalogowani użytkownicy mają wyższy dzienny limit. Subskrybuj
Premium
aby uzyskać nieograniczone przetwarzanie, przetwarzanie zbiorcze do 200 obrazów na zadanie, priorytetową kolejkę i przeglądanie bez reklam.
Powiązane narzędzia
Szukasz czegoś nieco innego? Wypróbuj
Próbnik kolorów z obrazu
,
Ekstraktor palety
lub
Konwerter Skali Szarości
— lub przeglądaj wszystkie
Narzędzia kolorów narzędzia.
