CSS gradient generator
Pick two colors and a direction - get a smooth multi-stop gradient and ready-to-paste CSS.
Number of colors
5
Order
Click any color to change it.
CSS code
background-image: linear-gradient(to top, #051937, #004D7A, #008793, #00BF72, #A8EB12);Why the gradient has extra stops
A plain two-color gradient often turns muddy in the middle, because the browser blends the colors straight through RGB. This tool calculates the in-between colors in LCH instead, so the gradient passes through clean, saturated hues, and writes them into the CSS as separate stops. Use the number of colors to choose how many stops you get, and copy any single color or the whole rule.