CSS gradient generator
Build a gradient, copy the CSS background code or download it as an image up to 3840×2160.
Free · No sign-up · No login · No install · No watermark
How to use
- Choose linear, radial or conic, and set the angle or centre.
- Pick colors and move the stops, or start from a preset or a random gradient.
- Copy the CSS or download a PNG in the size you need.
CSS gradient generator
A linear gradient runs along an angle (90° is left to right), a radial gradient spreads out from a centre point, and a conic gradient sweeps around the centre like a colour wheel. The CSS code works in all current browsers.
The PNG download draws the same gradient on a canvas, so you can use it as a wallpaper, slide background or social media image. Gradients with very similar colors can show slight banding in 8-bit images.
Frequently asked questions
Can I use the CSS in Tailwind or other frameworks?
Yes. Use it as an arbitrary background value or in your own CSS.
How many colors can a gradient have?
Up to six color stops.
Is the PNG free to use?
Yes. You created it; there is no watermark or license restriction.