Generator gradientów CSS

Wybierz dwa kolory, ustaw kierunek i skopiuj gotowy gradient CSS.

Na Twoim urządzeniu · Bez konta

Generator gradientów CSS przetwarza wprowadzone dane w tej przeglądarce. Dane wejściowe i wyniki nie trafiają do analityki. Lista ostatnio używanych narzędzi zapisuje nazwy narzędzi, liczbę wizyt i czas ostatniej wizyty. Lista zapisanych narzędzi przechowuje tylko ich nazwy. Zapisywanie szkicu jest opcjonalne, a szkic pozostaje na tym urządzeniu; zapisany tekst usuniesz za pomocą opcji szkicu. Opcjonalne wczytanie tekstu z adresu URL łączy się z danym serwerem; serwer widzi wskazany adres URL i Twój adres IP. Opcjonalna akcja „Użyj w” zachowuje dane do przekazania w tej karcie. Kolejne narzędzie usuwa je po otwarciu i pomija, jeśli minęła więcej niż minuta.

Opcja „Kopiuj link” umieszcza w adresie wybrane dane wejściowe do udostępnienia. Każdy, kto ma ten link, może je ponownie otworzyć. Pliki i wygenerowane wyniki nie są uwzględniane. Narzędzia do haseł i kluczy udostępniają tylko ustawienia.

Polski

Pierwszy kolor

Drugi kolor

Kierunek i kształt

Kąt (stopnie)

Kształt

Twój wynik

Enter your values.

Więcej

Skróty klawiszowe

O linkach i resetowaniu

Linki zawierają wpisane dane i ustawienia. Każdy, kto ma link, może je zobaczyć, więc pomiń prywatny tekst. Pliki i wygenerowane wyniki nie są dołączane; losowania są wykonywane ponownie.

Reset ponownie wczytuje narzędzie z początkowymi wartościami, zamyka otwarte pliki i zwalnia dostęp do urządzeń. Zapisane wersje robocze pozostają na tym urządzeniu, dopóki ich nie usuniesz.

Utwórz gradient CSS ze swoich kolorów

Gradient liniowy przechodzi od pierwszego punktu koloru do ostatniego wzdłuż wybranego kąta CSS. Gradient radialny rozchodzi się od środka. Skopiuj deklarację bezpośrednio do właściwości background.

Dalej: Pobieranie koloru ze zdjęcia

Przykład

Domyślnie powstaje linear-gradient(90deg, #0B7285 0%, #FF6B5E 100%), biegnący od lewej do prawej.

Zanim użyjesz wyniku

Podgląd korzysta z renderowania CSS w przeglądarce. Punkty kolorów i interpolacja mogą wyglądać inaczej w programach graficznych działających poza przeglądarką.

Dalej: Zmiana rozmiaru zdjęcia

Aktualizacja 7 października 2026

Jak cytować tę stronę

Styl cytowania

ToolOctopus. “Generator gradientów CSS.” Aktualizacja 7 października 2026. https://tooloctopus.com/pl/generator-gradientów-css.

Dodaj datę dostępu, jeśli wymagają tego Twoje wytyczne.

Cytowania są formatowane za pomocą biblioteki citeproc-js autorstwa Franka Bennetta oraz stylów Citation Style Language. Licencja i kod źródłowy.