Build a radial gradient with a circle or ellipse, any centre point and up to ten colour stops. Download it as an image and copy the matching CSS.
background: radial-gradient(circle farthest-corner at 50% 50%, #ff6b6b 0%, #feca57 50%, #ff6b6b 100%);Everything is drawn in your browser. Settings are remembered on this device; Share setup copies a link that rebuilds them.
Draws a gradient that spreads out from a point, exactly the way CSS radial-gradient does: you choose circle or ellipse, where the centre sits, how far the last colour reaches (nearest side, farthest corner and so on) and the colour stops in between. The preview updates as you drag, the CSS line under the download button always matches the picture, and the image can be saved as PNG, JPEG or WebP at any size up to 8000 px.
A 1920 × 1080 backdrop with the centre at 50%, 40%, circle, farthest corner, stops #FFFFFF at 0%, #D9D9D9 at 40% and #262626 at 100% gives a soft spotlight that fades to charcoal in the corners; as PNG it is about 90 KB, as JPEG at quality 92 about 35 KB. The same stops with the centre moved to 100%, 0% become a corner glow for a slide. Ellipse with Near side reach keeps the whole gradient inside the canvas so nothing is cut off.
Use it for backgrounds, spotlight and glow effects, placeholder art and anywhere you want the CSS and the image to agree. For a straight left-to-right or angled blend use Gradient Generator. To darken the corners of an existing photo rather than make a new image, Vignette Effect does that in place, and Glow Effect adds a radial halo around a subject.
Shape Circle keeps the same radius all round; Ellipse stretches with the canvas proportions. Reach uses the four CSS size keywords: nearest side keeps the gradient inside the image, farthest corner stretches it so the last colour lands exactly in the far corner. Centre X and Centre Y move the origin; the chips jump to common spots. Colours holds up to ten stops with a position each; Spread evenly spaces them out and Reverse flips the order. Presets replace the stops so you can edit from a starting point.
Does the image match the CSS exactly? Yes for circle and for the size keywords; ellipses use the same reach rules. Browsers interpolate colours slightly differently, so tiny banding differences are possible.
Can I make a transparent gradient? Not in this tool; every stop is a solid colour. For a see-through glow on a photo use Glow Effect or Vignette Effect.
What size should I export? Match where it goes: 1920 × 1080 for a desktop wallpaper or slide, 1080 × 1920 for a phone. Gradients compress well as JPEG.
Is anything uploaded? No. The gradient is drawn on a canvas in your browser.
You might also need