CSS Gradient Generator
Build linear, radial and conic gradients, copy the CSS or export a PNG.
Runs entirely in your browser — nothing is uploaded.
background: linear-gradient(135deg, #ff9a5a 0%, #ff5f8f 100%);
About the CSS Gradient Generator
The Freemium.Tools gradient generator builds linear, radial and conic CSS gradients with unlimited colour stops, gives you the copy-ready CSS, and exports the result as a PNG background image.
Gradients carry a lot of visual weight for very little code, but hand-writing the syntax and guessing stop positions is slow. Dragging a stop and watching the preview update is faster than any amount of trial and error.
Every change produces valid CSS you can paste into a stylesheet or a Tailwind arbitrary value, and the same gradient can be exported as a PNG at any size for slide decks and social banners.
How to use it
- 1Pick a style. Linear for a straight blend, radial for a glow, conic for a sweep.
- 2Set your colours. Add stops, drag their positions, or start from a preset and shuffle.
- 3Copy the CSS or export. Take the CSS rule, or download a PNG at your chosen dimensions.
Frequently asked questions
What does the angle mean?
0 degrees runs bottom to top and 90 degrees runs left to right, matching the CSS specification, so what you copy behaves exactly as previewed.
How many colours can I use?
As many as you like, though two or three usually read best. More stops than that tend to muddy the blend on real screens.
Can I use this for a Tailwind project?
Yes. Paste the rule into your stylesheet, or drop it into an arbitrary value such as bg-[linear-gradient(...)].
Why export a PNG?
For places that cannot run CSS: PowerPoint and Keynote slides, email backgrounds, social banners and video editors.