Generator gradientów CSS

Projektuj gradienty CSS wizualnie, z kodem generowanym na żywo.

Autor: Nethanel Bar, Co-founder & CEO

Ostatnia aktualizacja 25 kwietnia 2026

Chcesz naprawdę nauczyć się programować?

Coddy uczy cię przez pisanie prawdziwego kodu w przeglądarce: interaktywne lekcje, natychmiastowa informacja zwrotna i pomoc AI, gdy utkniesz.

Zacznij naukę za darmo

Czym jest generator gradientów CSS?

Generator gradientów CSS to wizualny edytor funkcji linear-gradient, radial-gradient i conic-gradient w CSS. Oszczędza ręcznego wpisywania punktów koloru: przeciągasz kolory na pasku, obserwujesz podgląd i kopiujesz gotowy do produkcji CSS, który od razu trafia do arkusza stylów.

Gradienty są wszędzie we współczesnych interfejsach: w sekcjach hero, nakładkach kart, stanach przycisków, efektach poświaty, subtelnościach trybu ciemnego, szkieletach ładowania i dekoracyjnych obramowaniach. Umiejętność czytania i pisania gradientu ręcznie przyspiesza pracę, ale wizualny generator jest niezastąpiony przy szkicowaniu pomysłów.

CSS obsługuje trzy typy gradientów. *Liniowy* biegnie wzdłuż prostej pod dowolnym kątem. *Radialny* rozchodzi się od punktu w kształcie koła lub elipsy. *Stożkowy* obiega kolorami punkt środkowy jak tarcza zegara. Każdy ma swoje zastosowania, a na jednym tle można łączyć kilka gradientów.

Czego nauczysz się, projektując gradienty

Gradient jest definiowany przez *kierunek* (lub kształt) i *punkty koloru*, czyli kolory z opcjonalnymi pozycjami.
Dwa punkty koloru w tej samej pozycji tworzą *ostrą krawędź*, przydatną przy paskach lub dzielonych tłach.
Nowoczesne przestrzenie kolorów, takie jak oklch, dają gładsze i bardziej jednorodne percepcyjnie gradienty niż rgb czy hsl.
Gradienty to w CSS obrazy, więc możesz ich używać wszędzie tam, gdzie background-image, border-image, mask-image lub filter przyjmuje obraz.

Jak krok po kroku zbudować gradient CSS

Wybierz typ gradientu
Wybierz liniowy dla prostego przejścia kolorów, radialny dla okrągłego zanikania lub stożkowy dla przejścia wokół punktu środkowego.
Ustaw kąt lub pozycję
Dla liniowego wybierz kąt w stopniach (0deg to w CSS kierunek z dołu do góry). Dla radialnego i stożkowego ustaw pozycję środka.
Dodaj i rozmieść punkty koloru
Dodaj tyle kolorów, ile chcesz. Przeciągaj każdy punkt wzdłuż paska, aby zmienić jego pozycję. Dwa punkty w tej samej pozycji tworzą ostrą krawędź.
Podejrzyj na prawdziwym kształcie
Przełączaj się między pełnoszerokościową sekcją hero, kartą i przyciskiem, aby zobaczyć, jak gradient wygląda przy różnych proporcjach.
Skopiuj CSS
Skopiuj gotową deklarację background i wklej ją do arkusza stylów.

Gradienty CSS: ściąga

Trzy funkcje gradientów i elementy, które się w nich znajdują. Pełna dokumentacja na MDN: linear-gradient, radial-gradient, conic-gradient.

Funkcja	Co robi	Przykład
`linear-gradient`	Przejście kolorów wzdłuż linii	`linear-gradient(135deg, #6c8cff, #b18cff)`
`radial-gradient`	Kolor rozchodzi się od punktu	`radial-gradient(circle at 30% 20%, #fff, #000)`
`conic-gradient`	Kolor obiega punkt środkowy	`conic-gradient(from 0deg, red, yellow, red)`
`repeating-linear-gradient`	Powtarzający się wzór pasków	`repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px)`
Punkt koloru	Kolor z opcjonalną pozycją	`#6c8cff 25%`
Ostry punkt	Ta sama pozycja dwa razy → ostra krawędź	`#000 50%, #fff 50%`
Wiele gradientów	Nałożone na jeden element	`background: g1, g2, g3;`

Przykłady gradientów CSS do wypróbowania

Subtelny gradient sekcji hero

CSS

.hero {  background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}

Dwukolorowy gradient ukośny. Klasyczny wygląd sekcji hero w małych SaaS-ach: przyjemny dla oka i przyjazny dla tekstu.

Radialny reflektor

CSS

.card {  background:    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%),    #1f2230;}

Nałóż półprzezroczyste radialne rozświetlenie na jednolity kolor, aby udać miękkie źródło światła. Świetne dla kart w trybie ciemnym.

Paski z ostrymi krawędziami

CSS

.stripes {  background: repeating-linear-gradient(    45deg,    #1a1a1a 0 12px,    #2a2a2a 12px 24px  );}

Dwa punkty w tej samej pozycji tworzą ostrą krawędź. Umieszczenie ich w repeating-linear-gradient powtarza wzór.

Częste błędy przy gradientach CSS

Zbyt wiele punktów koloru: trzy lub cztery zwykle wystarczą, a więcej często zamula efekt.
Zapominanie, że 0deg w gradientach CSS oznacza kierunek z dołu do góry (inaczej niż w wielu narzędziach projektowych, gdzie 0° wskazuje w prawo).
Umieszczanie tekstu na gradiencie o wysokim kontraście bez sprawdzenia czytelności na obu końcach. Pamiętaj o kontraście WCAG.
Animowanie bezpośrednio background-image. Większość przeglądarek nie interpoluje płynnie między gradientami, więc animuj background-position lub użyj przejścia na wspólnej zmiennej.
Rozciąganie gradientu na bardzo szerokie elementy bez myślenia o pasmowaniu. Dodaj pośrednie punkty lub użyj oklch, aby przejścia były gładsze.

Gradienty CSS: FAQ

Jak stworzyć gradient CSS?

Użyj linear-gradient, radial-gradient lub conic-gradient jako wartości właściwości background lub background-image. Każda funkcja przyjmuje kierunek (lub środek) i listę punktów koloru.

Czym różnią się gradienty liniowe, radialne i stożkowe?

Gradienty liniowe prowadzą kolory wzdłuż prostej. Radialne rozchodzą się od punktu w kształcie koła lub elipsy. Stożkowe obiegają kolorami punkt środkowy jak tarcza zegara.

Czy można animować gradient CSS?

Przeglądarki nie interpolują płynnie między obrazami gradientów. Standardowe triki to animowanie background-position dla ruchomego gradientu, przejście między dwiema warstwami gradientów przez krycie lub animowanie właściwości niestandardowych CSS używanych jako punkty koloru.

Dlaczego mój gradient wygląda na pasmowy?

Pasmowanie pojawia się, gdy zbyt mało odrębnych kroków koloru rozciąga się na dużym obszarze. Dodaj pośrednie punkty, przejdź na percepcyjną przestrzeń kolorów taką jak oklch albo nałóż subtelną warstwę szumu (dithering).

Czy gradienty CSS działają we wszystkich przeglądarkach?

Gradienty liniowe i radialne są obsługiwane wszędzie. Gradienty stożkowe działają we wszystkich nowoczesnych przeglądarkach. Dla bardzo starych przeglądarek dodaj przed deklaracją gradientu zapasowy jednolity background-color.