CSS Radial Gradient Generator
Build CSS gradients visually: linear, radial or conic type, angle slider and up to six color stops with a live full-width preview and copyable code.
Processed entirely in your browser — nothing you enter here is ever uploaded.
Result
About this tool
This page opens the gradient generator with the radial type already selected: the colors radiate outward from the center of the element in concentric circles, and every stop you change repaints the preview instantly.
radial-gradient() is the tool for spotlight and glow effects, soft vignettes, and backgrounds that need a focal point rather than a direction. The stop positions in percent map to the distance from the center — 0% is the middle, 100% the far edge — so tightening the first stops makes a small bright core, spreading them makes a wide wash.
Copy the background line once the preview looks right. The angle slider is hidden in this mode because a circle has no direction — switch back to linear or conic and it reappears.
Example. A linear gradient at 90 degrees from #2563eb at 0% to a second stop copies linear-gradient(90deg, #2563eb 0%, ...).
Limit. There are at most six color stops, and the angle slider runs from 0 to 360 degrees.