Generator gradientów CSS

Czym jest to narzędzie?

Gradienty CSS to obrazy generowane przez przeglądarkę na podstawie listy kolorów, a nie pliki, które przesyłasz — linear-gradient() przechodzi między kolorami wzdłuż prostej linii pod zadanym kątem, natomiast radial-gradient() rozchodzi kolory na zewnątrz od punktu centralnego. Oba akceptują dwa lub więcej punktów kolorów, z których każdy może być opcjonalnie przypisany do pozycji wzdłuż gradientu.

Pisane ręcznie gradienty łatwo subtelnie popsuć: kolejność punktów, brakujące procenty czy wartość kąta w złym kierunku (kąty CSS biegną zgodnie z ruchem wskazówek zegara od 'to top', inaczej niż kąty matematyczne). To narzędzie usuwa składnię z drogi — ustaw kolory i pozycje za pomocą selektorów i suwaków, obserwuj aktualizację podglądu w czasie rzeczywistym i skopiuj gotowy kod CSS, gdy efekt Cię zadowoli.

Źródło: CSS Images Module Level 3, W3C — specyfikacja definiująca składnię linear-gradient() i radial-gradient().

Dlaczego warto go używać?

• Podgląd na żywo aktualizuje się natychmiast po każdej zmianie koloru, pozycji i kąta — nie musisz odświeżać strony, aby zobaczyć wynik.
• Przełączaj się między gradientem liniowym a radialnym jednym kliknięciem; kontrolka kąta automatycznie się ukrywa dla gradientów radialnych, gdzie nie ma zastosowania.
• Dodawaj lub usuwaj punkty kolorów (od 2 do 4) zamiast być ograniczonym do stałego dwukolorowego gradientu.
• Każdy punkt ma własny suwak pozycji, więc punkty nie muszą być rozmieszczone równomiernie.
• Generuje gotowy do wklejenia kod CSS w standardowej składni linear-gradient()/radial-gradient().
• Działa całkowicie w Twojej przeglądarce — żadne z Twoich ustawień nie są nigdzie przesyłane. Bezpłatne, bez rejestracji, działa na urządzeniach mobilnych.

Jak używać

1. Wybierz Liniowy lub Radialny jako typ gradientu.
2. Dla gradientu liniowego przeciągnij suwak kąta — 90deg idzie od lewej do prawej, 180deg od góry do dołu i tak dalej.
3. Ustaw kolor i pozycję dla każdego punktu; pierwszy punkt to kolor początkowy gradientu, ostatni to kolor końcowy.
4. Kliknij „+ Dodaj punkt”, aby dodać maksymalnie 4 punkty dla wielokolorowego gradientu, lub przycisk ✕, aby usunąć jeden (minimum 2).
5. Skopiuj wygenerowany kod CSS i wklej go do deklaracji background lub background-image.

Przykład

Wejście

Linear · Angle: 90deg · Stops: #f97316 at 0%, #ec4899 at 100%

Wynik

background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);

Gradient od pomarańczowego do różowego, przebiegający od lewej do prawej — popularny styl dla przycisków, banerów i teł typu hero.

Gradient liniowy a radialny

Gradient liniowy przechodzi kolorem wzdłuż prostej linii, kontrolowanej przez kąt — przydatny do banerów, przycisków i kierunkowych teł. Gradient radialny rozchodzi kolor na zewnątrz od punktu centralnego w rozszerzających się pierścieniach, co pasuje do efektów reflektora, odznak czy tła w stylu poświaty. To narzędzie domyślnie ustawia gradient radialny jako okrąg wyśrodkowany w polu, co pokrywa najczęstszy przypadek użycia radialnego; CSS obsługuje też kształty elipsy i pozycje poza środkiem, jeśli chcesz dalej ręcznie edytować wynik.

Typowe wzory gradientów

• Delikatny akcent marki: dwa zbliżone odcienie (np. dwa tony tego samego koloru) pod niewielkim kątem, dające miękkie tło.
• Kontrastowy przycisk CTA: dwa nasycone, dopełniające się kolory pod kątem 90deg lub 135deg dla odważnego, klikalnego wyglądu.
• Nakładka na obraz: gradient od przezroczystego do pełnego koloru (ustaw przezroczystość za pomocą koloru rgba w kodzie hex pod selektorem lub dostosuj po skopiowaniu), nałożony na background-image.
• Wielopunktowy gradient tęczowy/marki: 3–4 punkty rozłożone na pełnym zakresie 0–100%, dające płynniejsze przejścia niż dwukolorowy gradient.
• Radialny reflektor: jasny punkt centralny blisko 0%, zanikający do ciemniejszej krawędzi blisko 100%, przydatny w sekcjach hero lub podświetleniach kart.

Łączenie z innymi narzędziami CSS

Gradienty są często łączone ze zaokrąglonymi rogami i cieniami na tym samym elemencie — karta z gradientem, miękkim cieniem i zaokrąglonymi rogami to popularny wzorzec UI. Wygeneruj każdy element osobno i połącz deklaracje CSS na elemencie.

→ Generator cieni ramki · Generator promienia krawędzi · Próbnik kolorów

Najczęściej zadawane pytania