CSS Gradient Generator
Create linear and radial gradients with live preview — copy the CSS instantly. Free, no signup.
About the CSS gradient generator
The PaletteCSS CSS gradient generator is a free online tool for creating linear and radial gradients. Add color stops, set their positions, choose the type and angle, and watch the live preview update instantly. When it looks right, copy the gradient as ready-to-use CSS for backgrounds, hero sections, buttons and modern UI — no signup and no limits.
Frequently asked questions
A CSS gradient generator is a free tool that builds the CSS code for linear and radial gradients. With PaletteCSS you set color stops and the angle, preview the gradient live, and copy ready-to-use CSS.
Yes. Creating a gradient and copying its CSS is completely free, with no signup required.
Add two or more color stops, pick each color and set its position, choose linear or radial, and adjust the angle. The live preview updates instantly and you can copy the CSS.
Yes. The generator supports both linear gradients with an adjustable angle and radial gradients, with up to five color stops.