Online Radial Gradient Image Generator
Generate a downloadable radial gradient image. Processing takes place locally in your browser.
Start using
What Online Radial Gradient Image Generator actually does
Default center and edge colors are #3B82F6 and #EC4899 on a 1200 by 630 px canvas. Horizontal and vertical center both default to 50%, scale to 100%, and optional endpoint transparency is off. Center values are constrained to 0..100, scale to 1..500%, dimensions to 1..10000 and output to 24 million pixels.
Checkable example
Verified default geometry for 1200 by 630 is center (600,315) and outer radius about 677.66 px, which reaches the corners when centered. Scale 200% halves the radius to about 338.83 px. Center 0%,0% is accepted and places the origin at the top-left rather than reverting to 50%,50%.
Controls, output and limits
The browser creates concentric circles with inner radius 0 and outer radius sqrt(w² + h²) / (2 × (s / 100)), both centered at the selected percentage coordinates. The two color stops are fixed at 0 and 1. Moving the center does not enlarge the radius to the farthest shifted corner.
With transparency enabled, each endpoint transparency is converted to alpha as 1-percent/100; for example 25% becomes alpha 0.75. Areas beyond the outer circle use the edge color rather than repeating. There is no elliptical mode, extra color stop, focal-center offset, texture, dithering or uploaded image.
Choose colors, dimensions, center, scale and optional transparency, press Generate, inspect corner coverage, then download PNG. Generation is browser-local and requires no upload. Large requested dimensions are reduced proportionally at the pixel budget; PNG is used so configured alpha can be retained.
For the formula below, w and h are the actual output dimensions and s is the entered scale percentage: 100 means factor 1. Endpoint settings are transparency, not opacity: 0% is opaque, 100% is transparent. The edge alpha also applies outside the circle.
r = sqrt(w² + h²) / (2 × (s / 100))
Processing takes place locally in your browser.