Twórz liniowe, radialne i stożkowe gradienty CSS od podstaw z przeciągalną kontrolą wielu przystanków i wyselekcjonowanymi presetami. Kopiuj gotowy CSS natychmiast.

Podgląd na żywo
Presety
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: ;

Wszystko jest obliczane na żywo w Twojej przeglądarce — bez rejestracji, całkowicie bezpłatnie.


O Generator gradientu

Generator gradientów tworzy niestandardowe gradienty CSS od podstaw. Wybierz typ liniowy, radialny lub stożkowy, ustaw kąt i ukształtuj mieszankę za pomocą wielopunktowego edytora: przeciągaj uchwyty, aby przesuwać punkty, klikaj pasek, aby dodawać nowe, i przebarwiaj dowolny punkt selektorem — podgląd na żywo aktualizuje się w miarę pracy.

Wyselekcjonowane presety dają solidny punkt wyjścia, gdy nie chcesz zaczynać od pustej strony, a akcje jednym kliknięciem — losowy, odwróć, obróć o 45° — przyspieszają eksplorację. Wygenerowany CSS jest zawsze widoczny i pozostaje zsynchronizowany z podglądem, więc to, co kopiujesz, jest dokładnie tym, co widziałeś.

Wszystko jest obliczane na bieżąco w Twojej przeglądarce bez żadnych kosztów. Skopiuj pełną regułę CSS lub samą wartość tła i wklej ją do arkusza stylów, stylu przycisku lub sekcji hero — prosty generator gradientów CSS do teł, nakładek i akcentów interfejsu.

Jak korzystać z Generator gradientu

  1. Wybierz typ gradientu: liniowy, radialny lub stożkowy.
  2. Zacznij od presetu lub kliknij „Losowy” dla natychmiastowego punktu wyjścia.
  3. Przeciągnij uchwyty punktów, aby ustawić kolory, kliknij pasek, aby dodać punkty, i edytuj kolor każdego punktu.
  4. Dostosuj kąt lub użyj „Odwróć” i „Obróć o 45°”, aby zmienić kierunek mieszanki.
  5. Skopiuj regułę CSS lub wartość tła i wklej ją do swojego projektu.

Najczęściej zadawane pytania

Tak. Narzędzie działa w całości po stronie klienta — bez rejestracji, bez kredytów i bez limitów liczby budowanych czy kopiowanych gradientów.

Gradient liniowy miesza kolory wzdłuż prostej linii pod wybranym kątem. Gradient radialny promieniuje na zewnątrz od punktu centralnego w postaci okręgów. Gradient stożkowy rozprowadza kolory wokół punktu centralnego jak wykres kołowy, co świetnie sprawdza się w kołach kolorów i pierścieniach postępu.

Gradient potrzebuje co najmniej dwóch punktów, a Ty możesz klikać pasek, aby dodawać kolejne. Każdy punkt ma własny kolor i przeciągalną pozycję, więc łatwo zbudować złożone, wielokolorowe mieszanki.

Gradienty liniowe i radialne są obsługiwane wszędzie. Gradienty stożkowe są obsługiwane we wszystkich nowoczesnych przeglądarkach, ale nie w bardzo starych, więc zapewnij zapasowy background-color, jeśli musisz obsługiwać starsze wersje.

Tak — użyj towarzyszącego narzędzia Generator gradientu ze zdjęcia, które wyodrębnia dominujące kolory przesłanego obrazu i zamienia je w edytowalne punkty gradientu. To narzędzie jest odpowiednikiem tworzenia od podstaw.


Popularne wyszukiwania
generator gradientu kreator gradientu css generator gradientu liniowego kreator gradientu radialnego gradient stożkowy css darmowy generator gradientu
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.