Programowanie webowe
CSS Gradient Generator
Zbuduj gradient liniowy, radialny lub stożkowy z kilku kolorów i otrzymaj gotowy CSS.
0° — u góry, dalej zgodnie z ruchem wskazówek zegara.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
Artykuł o tym narzędziu: Gradienty CSS: czym linear różni się od radial i conic
Najczęstsze pytania
Jaka jest różnica między gradientami liniowymi, radialnymi i stożkowymi?
Gradienty liniowe przechodzą wzdłuż prostej linii pod wybranym kątem, gradienty radialne rozchodzą się na zewnątrz od punktu centralnego jako koło lub elipsa, a gradienty stożkowe zataczają kolorami wokół punktu centralnego jak koło kolorów.
Czy gradienty stożkowe są obsługiwane we wszystkich przeglądarkach?
Wszystkie obecne główne przeglądarki obsługują gradienty stożkowe, ale to nowsza funkcja CSS niż gradienty liniowe czy radialne, więc bardzo stare wersje przeglądarek mogą ich nie renderować.
Co otrzymuję jako wynik?
Narzędzie generuje gotową do użycia składnię CSS background z wybranymi kolorami, przystankami i pozycjami, którą możesz wkleić bezpośrednio do swojego arkusza stylów.
Czym repeating-linear-gradient różni się od zwykłego linear-gradient?
Zwykły linear-gradient rozciąga swoją sekwencję kolorów dokładnie raz na cały element, natomiast repeating-linear-gradient powtarza tę samą sekwencję color stops cyklicznie, tworząc tło w paski lub wzór.
Czy mogę nałożyć kilka gradientów na siebie jako tło?
Tak, właściwość background-image przyjmuje listę gradientów oddzielonych przecinkami, które nakładają się warstwami tak samo jak kilka obrazów tła — pierwszy na liście znajduje się na wierzchu.