Why is there no angle control?

Because a radial gradient radiates from a point rather than running along an axis, so it has no direction to set. The angle slider only exists on the linear and conic builders.

Can I move the centre or make it an ellipse?

Not from the interface — the shape is fixed to a circle at the centre. Both changes are a small manual edit to the copied declaration.

How do I get rings instead of a smooth ramp?

Add stops. Three colours produce a centre, a middle band and an outer band, and placing two stops at the same position creates a hard-edged ring.

Does the ramp run out to the edge of the box or past it?

Past the nearest edge. With no sizing keyword the browser scales the circle to reach the farthest corner, so a two-stop radial still has colour in the corners rather than fading out along the short side.

Radial Gradient Generator

Q: What does the zero percent stop mean here?

The centre. The first stop is the colour at the middle of the circle and the last is the colour at the outer boundary, so a two-stop ramp reads as a vignette.

Stops

Stop 1

Position: 0%

Stop 2

Position: 100%

CSS

background: radial-gradient(circle, #3B82F6 0%, #EF4444 100%);

You Might Also Need

CSS Gradient Animation Generator

Generate animated CSS gradients

Conic Gradient Generator

Build conic gradients with center & angle

Linear Gradient Generator

Build linear gradients with control over angle

Mesh Gradient Generator

Generate multi-blob mesh gradients

The radial gradient generator builds a circular gradient from a list of color stops and writes the finished CSS declaration, with the ramp running outwards from the centre.

What is Radial Gradient Generator?

The radial gradient generator keeps the shared gradient controls — a live preview, one row per stop with a colour field and a position slider, and the CSS panel underneath — and swaps the axis for a centre.
There is no angle slider, because a radial gradient has no direction to set: it radiates from a point rather than running along an axis.

Everything else about the stops still applies, and their meaning is worth restating for this shape. The zero percent position is the centre, not the left edge, so the first stop is the colour at the middle of the circle and the last is the colour at the outer boundary. A two-stop ramp therefore reads as a vignette or a spotlight, while adding stops creates rings — three colours produce a centre, a middle band and an outer band, which is the quickest way to build a soft halo or a button that appears lit from within.

What the output always contains is a circle. The shape keyword is fixed: the declaration opens with a radial gradient of a circle, and the ramp is scaled to reach the corners of the element's box, which is the default sizing the browser applies when nothing else is specified. That combination behaves sensibly in most cases and is not adjustable here — there is no way to request an ellipse, to place the origin away from the centre, or to choose a different sizing keyword such as closest-side. Those are all legitimate things to want, and each would need to be written by hand into the copied declaration.

Position is the other omission worth naming. A radial gradient's centre can be moved, and moving it is often the difference between a spotlight effect and a wash, but with the centre fixed there is no control for it. In practice the workaround is the same as for the shape: copy the declaration and add the position clause manually, which is a small edit to a value that is otherwise generated correctly.

The angle slider's absence has a useful side effect, which is that the stops become the only variable. With a linear gradient it is easy to blame the direction when the ramp does not look right; here the only things to adjust are the colours and their spacing, so the effect of moving a stop is much easier to learn. That makes this a good place to experiment with stop management for its own sake, separate from direction decisions.

Where radial gradients are the right choice is when the light source matters — a soft glow behind a logo, a spotlight on a hero section, a vignette that draws the eye towards the centre of an image, a subtle interior shading on a card. They also work as decorative background layers stacked behind other elements, where the circle's soft edge blends into whatever is beneath.

Limits: one circle at a fixed centre, no ellipse, no repeat, no interpolation-space control and no conic form.
Within those bounds it produces a correct radial gradient css declaration in one pass, with the stops placed by drag rather than by typing numbers.
For a glow or a vignette it is the shortest route from a colour pair to a pasteable circular gradient css; to generate radial gradient code for anything more elaborate, the copied declaration is the right place to edit.

How to use Radial Gradient Generator

Set the stop colours — the zero percent stop is the centre of the circle.
Drag the position sliders to control how far each colour reaches from the middle.
Add further stops if the gradient needs rings rather than a simple ramp.
Copy the background declaration, adding a position clause by hand if the centre should move.

When to use Radial Gradient Generator vs related tools

Use this when the effect should radiate — glows, spotlights, vignettes, interior shading. Use the linear gradient generator when the ramp should run across the element, or a conic tool when it should sweep around it. Where a radial gradient covers a large, soft area, the noise & grain texture generator is the direct antidote to the banding that shows in the widest part of the ramp, and wrapping several of these circles onto one surface is what the mesh gradient generator does.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.