Generator gradientów CSS
Projektuj gradienty tła CSS bez zapamiętywania składni. Przełączaj między liniowym a radialnym, ustaw kąt dla gradientu liniowego (stopnie) i wybierz dwa stopnie koloru na 0% i 100%. Podgląd aktualizuje się natychmiast; skopiuj pełną deklarację background albo background-image do arkusza stylów. Obsługuje kolory HEX z walidacją.
Kąt (°)
Kolor 1
Kolor 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 100%);
Jak zbudować gradient
1. Wybierz gradient liniowy albo radialny.
2. Dla liniowego ustaw kąt w stopniach (0 = od dołu do góry, 90 = od lewej do prawej).
3. Wpisz kolor początkowy i końcowy (HEX).
4. Skopiuj CSS z karty wyniku do projektu.
Przykłady gradientów
Liniowy baner hero (135deg)
Morski #6F9B96 do brzoskwiniowego #E8C4B8 pod 135° — popularna przekątna w nagłówkach landing page. Użyj jako tła pełnej szerokości sekcji.
Radialny reflektor
Typ radialny z jasnym środkiem i ciemną krawędzią — symuluje winietę: radial-gradient(circle, #fff 0%, #333 100%).
Pionowe przejście (180deg)
Kąt 180 dla zaniku od góry do dołu z koloru marki do bieli — przydatne za paskiem nawigacji.
Kiedy warto użyć tego narzędzia
• Gdy prototypujesz tła UI i chcesz natychmiastowej wizualnej informacji zwrotnej.
• Gdy nie pamiętasz, czy kąt 90deg idzie w lewo-prawo czy góra-dół.
• Gdy potrzebujesz CSS do wklejenia w CodePen, wartościach arbitralnych Tailwind albo przekazaniu designu.
Kiedy lepiej wybrać coś innego
• Gdy potrzebujesz więcej niż dwa stopnie koloru — rozszerz skopiowany CSS ręcznie albo użyj aplikacji graficznej.
• Gdy chcesz gradientów stożkowych (conic) — nie są tu obsługiwane.
• Gdy potrzebujesz automatycznych wariantów dark mode — zduplikuj i dostosuj kolory osobno.
Stopnie koloru szczegółowo
Stop to kolor plus opcjonalna pozycja: #ff0000 0%, #0000ff 50%, #00ff00 100%. Przeglądarka interpoluje RGB między stopami. Środkowe stopnie tworzą pasmowe zachody słońca albo wielokolorowe paski brandowe. Zacznij od dwóch stopów tutaj, potem wklej i dodaj trzeci w devtools, aż wygląda dobrze.
Kąty gradientu liniowego
CSS mierzy kąty zgodnie z ruchem wskazówek zegara od „góry” (0deg). To różni się od lekcji matematyki, gdzie kąt często startuje od prawej. Gdy gradient wygląda źle obrócony, dodaj albo odejmij 90deg. Używaj devtools obok tego generatora do doprecyzowania.
Wydajność i fallbacki
Gradienty są przyjazne GPU w nowoczesnych przeglądarkach. Dla bardzo starych klientów ustaw jednolite background-color jako fallback do jaśniejszego stopnia przed linią gradientu.
Najczęstsze pytania
Jaka jest składnia gradientu liniowego w CSS?
background: linear-gradient(kąt, kolor1 0%, kolor2 100%); Kąt w stopniach; kolory to stopnie wzdłuż linii.
Jak działają stopnie koloru?
Stopnie oznaczają, gdzie na linii gradientu leży dany kolor. 0% to początek, 100% koniec. To narzędzie ustawia dwa stopnie; dodaj więcej w edytorze, jeśli trzeba.
Liniowy vs. radialny?
Liniowy miesza wzdłuż prostej. Radialny rozchodzi się od środka — dobry do kół i miękkich plam.
Jakie kąty są popularne?
0deg w górę, 90deg w prawo, 180deg w dół, 135deg po przekątnej — częste na kartach i sekcjach hero.
Czy ustawia background czy background-image?
Wynik używa skrótu background odpowiedniego dla większości divów; możesz rozdzielić na background-image przy nadpisywaniu innych warstw.
Czy kolory trafiają na serwer?
Nie. Podgląd renderuje się lokalnie.
Czy to jest darmowe?
Tak, bez konta.