CSS Gradient Generator
Pick a gradient type, choose up to four colors, and copy the CSS. The preview updates as you go.
How it works
The tool builds a standard CSS background value:linear-gradient(), radial-gradient() orconic-gradient() with your colors in order. For linear and conic gradients you set the starting angle; for radial gradients you choose between a circle and an ellipse.
Add up to four color stops. With two colors you get a simple blend; with three or four the browser interpolates evenly between each pair. The whole state lives in the URL, so any gradient you make is shareable.
Frequently asked questions
What’s the difference between the three types?
Linear blends along a straight line at the chosen angle. Radial blends outward from a center point in a circle or ellipse. Conic blends around the center like a color wheel — good for pie-chart effects.
Can I use this for text gradients?
Yes. Copy the CSS and apply it withbackground-clip: text andcolor: transparent to fill text with the gradient.
Why only up to four colors?
Most real-world gradients use two or three stops. Four keeps the UI simple and the CSS readable. If you need more, paste your own stops into the generated CSS.
Does it work in all browsers?
Yes — all three gradient functions are supported in every modern browser, including older versions of Chrome, Firefox, Safari and Edge.