What makes a good CSS gradient
A gradient works when the color transition supports the content instead of fighting it — enough contrast for text to stay readable, and a direction (angle) that leads the eye toward your primary call to action rather than away from it.
Two colors is usually enough. Three can work if the middle stop is a genuine blend rather than a third unrelated hue.
Linear vs radial gradients
linear-gradient() moves color along a straight angle — the standard choice for hero sections and full-page backgrounds. radial-gradient() spreads color out from a center point, which reads more like a spotlight and suits smaller UI elements, cards, or buttons.
Generating and exporting your gradient
Use the Gradients category on the CoolBG home page to preview live options, then open any card in the editor to adjust the primary, secondary, and accent colors along with the angle. The Copy CSS button gives you a ready-to-paste background property — no build step, no dependency.
If you need a static asset instead of live CSS (for an email template or a design file), export the same gradient as a PNG at 1080p, mobile, or 4K directly from the editor.
Where gradients tend to work best
Hero sections and page headers, empty states and loading screens, app icons and social preview images, and section dividers where a flat color would feel abrupt.