Generator gradientu CSS

Wizualny generator gradientów CSS: liniowych, radialnych i stożkowych. Dodaj punkty kolorów, ustaw kąt i skopiuj gotowy kod CSS do tła i przycisków, za darmo w przeglądarce.

Powtarzaj

각도: 135deg

Punkt koloru

100%

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Osadź

<iframe src="https://devtools.patrache.studio/pl/generators/css-gradient/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Generator gradientu CSS — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/pl/generators/css-gradient/">Generator gradientu CSS</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Ostatnia aktualizacja: 2026 · Darmowe narzędzie online

Czym jest Generator gradientu CSS?

Wizualny generator gradientów CSS: liniowych, radialnych i stożkowych. Dodaj punkty kolorów, ustaw kąt i skopiuj gotowy kod CSS do tła i przycisków, za darmo w przeglądarce.

Jak używać

1
Wybierz typ— Wybierz typ gradientu (liniowy, radialny, stożkowy).
2
Dostosuj punkty kolorów— Dostosuj kolor i pozycję każdego punktu koloru.
3
Podgląd— Sprawdź wynik w czasie rzeczywistym w podglądzie.
4
Kopiuj kod CSS— Skopiuj kod CSS do schowka przyciskiem 'Kopiuj'.

Powiązane narzędzia

Generator CSS box-shadowGenerator CSS box-shadow z regulacją przesunięcia, rozmycia, rozproszenia, koloru i inset oraz podglądem cienia na żywo. Skopiuj gotowy kod CSS, za darmo w przeglądarce.

Generator CSS border-radiusGenerator CSS border-radius z ośmioma niezależnymi uchwytami narożników, suwakami i podglądem zaokrąglonego kształtu na żywo. Skopiuj gotowy kod CSS, za darmo w przeglądarce.

Konwerter kolorówKonwerter kolorów między kodami HEX, RGB, HSL i OKLCH, ze współczynnikiem kontrastu WCAG dla dwóch barw. Sprawdzisz dostępność już przy doborze palety, za darmo w przeglądarce.

Generator fal SVGDarmowy generator fal SVG online z edytorem wizualnym do gładkich kształtów fal. Dostosuj amplitudę, kolory i warstwy, zastosuj gotowe ustawienia i skopiuj kod CSS oraz SVG do teł i przerywników sekcji.

Najczęściej zadawane pytania

Nie ma limitu, ale typowe jest 2-6. Zbyt wiele może wpłynąć na wydajność.

Tak. Zaznacz pole wyboru 'Powtórz', aby dodać prefiks repeating.

Dostępnych jest pięć presetów: Sunset, Ocean, Forest, Midnight i Rainbow.

Obecnie produkowany jest tylko czysty CSS. Konwersja na Tailwind jest planowana w przyszłej aktualizacji.

Nie. Całe przetwarzanie odbywa się w przeglądarce.