Generator CSS Gradient
Twórz gradienty CSS (linear i radial) online — wybierz kolory, kąt i color-stopy, kopiuj gotowy kod jednym kliknięciem. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Generator gradientów CSS
Twórz piękne gradienty CSS w kilka sekund — wybierz typ (liniowy lub radialny), dwa kolory, kąt i pozycje color-stopów. Gotowy kod CSS skopiujesz jednym kliknięciem i wkleisz wprost do arkusza stylów.
Do czego służy
Generator gradientów CSS pozwala projektantom i programistom szybko tworzyć kod CSS dla gradientów liniowych i radialnych bez konieczności ręcznego pisania składni. Narzędzie obsługuje gradienty linear-gradient (przejście wzdłuż linii prostej pod dowolnym kątem) i radial-gradient (przejście promieniowe od środka koła). Możesz ustawić dwa kolory w formacie hex (#RRGGBB), ich pozycje na osi gradientu (color-stop w procentach) oraz kąt kierunku dla gradientów liniowych. Opcjonalnie generator doda prefiks -webkit- dla starszych przeglądarek WebKit.
Jak używać
1. Wybierz typ gradientu: liniowy lub radialny.
2. Wprowadź Kolor 1 i Kolor 2 w formacie hex, np. #FF6B6B.
3. Dla gradientu liniowego ustaw kąt (0–360 stopni; 0° = pionowy w górę, 90° = poziomy w prawo, 135° = ukośny).
4. Ustaw pozycje color-stopów (domyślnie 0% i 100%).
5. Zaznacz opcję prefiksów vendor jeśli potrzebujesz wsparcia starszych przeglądarek.
6. Kliknij Generuj gradient — zobaczysz podgląd i gotowy kod CSS do skopiowania.
Gradienty CSS — teoria i zastosowanie
Gradienty CSS to funkcje obrazu (image functions) wbudowane w CSS3, które nie wymagają żadnych plików graficznych. Funkcja linear-gradient(135deg, #FF6B6B 0%, #4DABF7 100%) tworzy przejście kolorów wzdłuż linii pod kątem 135 stopni — od koloru coral (#FF6B6B) do błękitnego (#4DABF7). Funkcja radial-gradient(circle, #kolor1 0%, #kolor2 100%) tworzy efekt koncentryczny wychodzący ze środka elementu.
Gradienty są w pełni obsługiwane przez wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari, Edge) bez prefiksów. Prefiks -webkit- jest potrzebny tylko dla starszych wersji Safari i Chrome (sprzed 2013 r.). Property background (lub background-image) przyjmuje gradient jako wartość — można go też łączyć z innymi obrazami tła przez przecinek.
Najczęstsze pytania
Jaka jest różnica między gradient liniowym a radialnym?
Gradient liniowy (linear-gradient) tworzy przejście wzdłuż prostej linii pod określonym kątem — np. 90deg to poziome przejście od lewej do prawej. Gradient radialny (radial-gradient) tworzy przejście promieniowe, rozchodzące się koncentrycznie od centrum elementu na zewnątrz.
Co to jest color-stop i jak ustawić pozycję koloru?
Color-stop to punkt na osi gradientu, w którym kolor osiąga pełną wartość. Podajesz go w procentach (0%–100%) lub w jednostkach długości (px, em). Domyślnie pierwszy kolor zaczyna się na 0%, a ostatni kończy na 100%. Ustawiając np. 30% dla koloru 1 i 70% dla koloru 2, tworzysz ostrzejsze przejście w środku gradientu.
Czy gradient CSS działa jako tło na każdym elemencie?
Tak — gradienty CSS można stosować wszędzie tam, gdzie dozwolony jest obraz CSS: background, background-image, border-image, mask-image. Najczęściej ustawia się je jako tło sekcji, kart, przycisków lub nagłówków stron.
Jak wkleić wygenerowany CSS do projektu?
Skopiuj kod CSS z pola wynikowego i wklej go do reguły CSS swojego elementu, np.:.hero { background: linear-gradient(135deg, #FF6B6B 0%, #4DABF7 100%); }
Jeśli zaznaczono prefiksy vendor, kod zawiera już linię -webkit- powyżej standardowej deklaracji — zachowaj obie.