How Many Colors Can a CSS Gradient Have?
A CSS gradient can have as many color stops as you list — there's no built-in limit on the number of colors, whether it's linear, radial, or conic. A rainbow gradient using all seven spectrum colors is just linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) — the same syntax as a two-color gradient, just with more comma-separated stops.
Here's how the stop-list syntax scales past three colors, and how to build a gradient with more stops than a typical color-picker UI offers by hand.
The syntax scales past any specific tool's UI
linear-gradient(), radial-gradient(), and conic-gradient() all accept an arbitrary list of color stops separated by commas — the function itself has no maximum. A color picker interface with three color swatches is a UI limit, not a CSS limit; the underlying property happily accepts five, seven, or twenty stops if you write them by hand.
Starting from a working 3-color gradient like linear-gradient(120deg, #055aae 0%, #c43592 50%, #fe7825 100%), extending it is just inserting more colors and adjusting the percentages: linear-gradient(120deg, #055aae 0%, #c43592 25%, #fe7825 50%, #f7d716 75%, #2ecc71 100%) adds two more stops using the same pattern.
Spacing stops evenly for a clean rainbow
For an even rainbow, divide 100% by (number of colors − 1) and space the stops that far apart — seven colors means stepping by roughly 16.67% each. Leaving the percentages off entirely also works; CSS spaces unpositioned stops evenly on its own, which is usually good enough unless you need one color to dominate more of the gradient than the others.
More than about seven or eight stops starts to look like visual noise rather than a deliberate gradient in most UI contexts — past that point, a smoother two or three-color gradient generally reads better than cramming in more colors.
Build the base, then extend it
Our 3-Color Gradient tool generates a working three-stop gradient with a live preview and copy-ready CSS — the fastest way to get correct syntax and real color values to start from. Copy the generated line and add more comma-separated stops by hand for a full rainbow or any longer sequence.