Wyodrębnij piękny gradient z dowolnego zdjęcia — upuść obraz, wybierz nastrój, a dominujące kolory staną się przeciągalnymi przystankami gradientu. Kopiuj gotowy CSS natychmiast.

Przeciągnij i upuść obraz tutaj

lub kliknij, aby przeglądać — możesz też wkleić ze schowka

Wszystko działa w Twojej przeglądarce — Twój obraz nigdy nie jest przesyłany, bez rejestracji, całkowicie bezpłatnie.

Obraz źródłowy
Czytam kolory…
Obraz źródłowy
Nastrój
Wyodrębnione kolory
To są dominujące kolory wyodrębnione z Twojego obrazu. Kliknij próbkę, aby ją skopiować, lub przeciągnij przystanki poniżej, aby doprecyzować gradient.
Podgląd gradientu
Typ gradientu
Kąt
°
Przystanki kolorów
Przeciągnij uchwyt, aby przesunąć przystanek, lub kliknij pasek, aby dodać nowy. Zaznacz przystanek, aby edytować jego kolor.
Zaznaczony przystanek
%
CSS
background: ;

O Generator gradientu z obrazu

Generator gradientu ze zdjęcia zamienia dowolną fotografię w gotowy do użycia gradient CSS. Upuść, przeglądaj lub wklej obraz, a narzędzie odczyta go na kanwie, wyodrębni jego dominujące kolory i rozłoży je jako punkty gradientu, które możesz przeciągać, przebarwiać i zmieniać kolejność, aż mieszanka dopasuje się do charakteru oryginału.

Selektor nastroju — Kolorowy, Jasny, Stonowany, Głęboki lub Ciemny — zmienia, które wyodrębnione kolory stają się punktami, dzięki czemu jedno zdjęcie może dać kilka bardzo różnych gradientów. Kontrolujesz typ gradientu (liniowy, radialny lub stożkowy), kąt oraz same punkty: kliknij pasek, aby dodać punkt, przeciągnij, aby go przesunąć, odwróć lub obróć jednym kliknięciem.

Cały proces odbywa się w Twojej przeglądarce; Twój obraz nigdy nie jest przesyłany na serwer. Gdy podgląd wygląda dobrze, skopiuj pełną regułę CSS, samą wartość tła lub wyodrębnione kolory osobno — idealne do sekcji hero, teł stron i wizualizacji marki opartych na fotografii.

Jak korzystać z Generator gradientu z obrazu

  1. Przeciągnij i upuść obraz, kliknij, aby go przeglądać, lub wklej go ze schowka.
  2. Wybierz nastrój — Kolorowy, Jasny, Stonowany, Głęboki lub Ciemny — aby zdecydować, które wyodrębnione kolory staną się punktami.
  3. Wybierz typ gradientu (liniowy, radialny lub stożkowy) i dostosuj kąt.
  4. Przeciągnij punkty koloru, aby precyzyjnie dopracować mieszankę; dodawaj, usuwaj, odwracaj lub przetasuj punkty w razie potrzeby.
  5. Kliknij „Kopiuj CSS”, aby pobrać gotowy do wklejenia kod gradientu.

Najczęściej zadawane pytania

Nie. Obraz jest odczytywany bezpośrednio do kanwy w Twojej przeglądarce, a wyodrębnianie kolorów i obliczenia gradientu odbywają się w całości lokalnie. Nic nie opuszcza Twojego urządzenia na żadnym etapie.

Tak, w całości. Ponieważ wszystko działa po stronie klienta, nie ma żadnych kredytów, kont ani limitów — wyodrębniaj gradienty z dowolnej liczby obrazów.

To narzędzie zaczyna od zdjęcia: wyodrębnia dominujące kolory obrazu i buduje z nich gradient. Zwykły generator gradientów zaczyna od zera, z kolorami wybranymi samodzielnie przez Ciebie. Oba dają ten sam rodzaj edytowalnego, gotowego do skopiowania kodu CSS.

Nastroje przesortowują kolory wyodrębnione z Twojego obrazu: Kolorowy faworyzuje żywe, zróżnicowane odcienie, Jasny wybiera jasne, nasycone tony, Stonowany wybiera łagodniejsze, mniej nasycone kolory, a Głęboki i Ciemny pobierają bogatsze, ciemniejsze kolory. Zmiana nastroju natychmiast przebudowuje punkty gradientu.

Tak. Każdy punkt można przeciągać, możesz kliknąć pasek, aby dodać punkty lub usunąć zaznaczone, zmienić kolor dowolnego punktu, przełączać się między liniowym, radialnym i stożkowym, obracać kąt w krokach co 45°, odwrócić kierunek lub przetasować nowe kolory z obrazu.


Popularne wyszukiwania
gradient z obrazu wyciągnij gradient ze zdjęcia obraz na gradient css generator gradientu ze zdjęcia utwórz gradient z obrazka gradient css z obrazu
Potrzebujesz pomocy?
Masz problem z tym narzędziem? Daj nam znać.
Zgłoś problem

Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.