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%.
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.
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.
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.