To create a CSS gradient, pick your colours, set each colour’s position, choose linear, radial or conic and the angle, then copy the generated background CSS. You can also download it as a PNG for use as a wallpaper or design background.
How to use the Gradient Generator
-
1
Choose colours
Two to six stops, each with a position.
-
2
Pick the type and angle
Linear (with angle), radial or conic.
-
3
Copy or download
Copy CSS or download a PNG in common sizes.
Features
-
Live preview
See changes instantly.
-
Random gradients
Harmonious random colour pairs for inspiration.
-
PNG export
Up to 2560 × 1440.
Examples
background: linear-gradient(135deg, #2451e6 0%, #12b3a8 100%); — a diagonal blue-to-teal gradient.
Privacy and file handling
- Where it runs
- Runs in your browser
Runs entirely in your browser. Your files and text are not uploaded to our servers.
Frequently asked questions
Do CSS gradients work in all browsers?
Linear and radial gradients work in every modern browser; conic gradients work in all current browsers too.
How do I use the CSS?
Paste the line into the CSS rule of any element, e.g. a section or button.
Was this tool helpful?
Thanks for the feedback.
Last reviewed