DARMOWE NARZĘDZIE

Generator Gradient

Twórz piękne gradienty CSS: liniowe, radialne, koniczne i stożkowe. Wiele kolorów, kąt, pozycja. Kopiuj kod CSS. Bezpłatnie. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Type

Angle

Preview height

Kolorów 1

Stop 1

Kolorów 2

Stop 2

Kolorów 3

Stop 3

Pos x

Pos y

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator gradientów CSS online

Gradient tła potrafi całkowicie odmienić charakter strony. Generator tworzy płynne, wielokolorowe gradienty CSS wszystkich typów z podglądem na żywo i gotowym kodem do skopiowania.

gradient CSS linear-gradient radial-gradient generator kolorów tła

Typy gradientów

linear-gradient (kąt kierunku, 0-360°), radial-gradient (środek i forma: circle/ellipse), conic-gradient (stożkowy – do kół kolorów i krojenia tortu), repeating-gradient (wzór powielający).

Edytor gradientu

Przeciągaj color stops na pasku, dodawaj kolory (HEX/HSL/RGB), zmieniaj opacity każdego stopu, kopiuj CSS i tinyPNG-kompatybilny Base64 SVG.

Najczęstsze pytania

Jak zrobić gradient na tekście?

background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent; – klasyczna technika gradient text w CSS.

Czym jest conic-gradient?

Gradient obracający się wokół centrum (jak zegar). Świetny do: kół kolorów, progress circular, kart z gradientem border.

Jak stworzyć animowany gradient?

CSS: zmiana background-position z background-size: 200% 200% i animation – prosta technika płynnego ruchu kolorów.

Inne narzędzia CSS: mesh gradienty i generator tła siatkowego.