Where a linear gradient varies along a straight line, a radial gradient varies with distance from one point. The colour is constant along every ellipse centred there and changes as you move outward. That makes it the natural tool for light: a spotlight behind a hero illustration, a button lit from its own centre, a vignette darkening the edges of a photo frame.
The generator's default output is short, and every part of it matters:
background: radial-gradient(circle at 50% 50%, #22d3ee 0%, #0ea5e9 100%);
| Part | Meaning | Control here |
|---|---|---|
circle or ellipse | The shape of the ending figure. A circle has one radius; an ellipse has two, one per axis. | Shape toggle |
at X Y | The centre of the gradient. Required when you also give a size, and always written out by this tool. | Nine presets plus X and Y sliders |
| Colour stops | Colour plus position measured from 0% at the centre to 100% at the edge of the ending shape. | Two to six stops |
Beware the trap that at exists to prevent. A bare length or percentage pair at the front of a radial gradient is a size, not a position, so radial-gradient(50% 50%, red, blue) sets explicit ellipse radii and leaves the gradient in the middle of the box. Writing at 50% 50% is what moves the centre. Since the generator always emits at, its output can never be ambiguous — but hand-edited versions often are.
The nine position buttons are shortcuts that write percentage pairs: top-left is 0% 0%, centre is 50% 50%, right is 100% 50%. The sliders take anything between, so 30% 70% is an ordinary centre, and CSS also accepts edge-relative syntax such as at right 20px bottom 10px for a fixed offset from an edge.
Neither shape is sized by a keyword here, so both use the default sizing, farthest-corner: the ending shape is scaled until it reaches the furthest corner of the box. That drives the difference between the two modes.
An ellipse has an independent radius on each axis, so both radii can stretch to the farthest corner simultaneously. The result is a figure that touches all four corners of the container, meaning colour 100% lands exactly at every corner and the whole box is covered.
A circle has one radius, set to the distance from the centre to the single furthest corner. When the box is not square that radius is measured against the longer axis, so a circle centred at 50% 50% in a wide banner overflows top and bottom but leaves the left and right edges short of the final stop. The visible effect is a circular hotspot floating in a field of one colour — a feature when you want a spotlight, a bug when you expected a full-bleed fade. Switch to ellipse in the second case.
Set the shape to circle, the centre to 50% 0%, and give it a light cyan at the top and a deep blue at the bottom:
background: radial-gradient(circle at 50% 0%, #e0f7ff 0%, #0ea5e9 100%);
The circle's radius is the distance from the top-centre to either bottom corner, so it covers the box and then some. Colour 0% sits at the top centre, and the colour darkens steadily with distance. Because the last stop sits at 100% along a radius that overshoots the bottom corners, the very bottom never quite reaches the final blue — use the ellipse shape, or push the final stop past 100%.
rgba(), not a colour picker. The stop inputs here are standard hex colour fields, so they produce opaque colours. For a glow that dissolves into the page you need to hand-edit the last stop to rgba(34, 211, 238, 0) using the same colour with zero alpha. Modern browsers interpolate alpha in premultiplied space, so a fade like that no longer picks up the dark grey fringe that older engines produced from transparent.Replace the function with repeating-radial-gradient() and place the stops close together; the pattern then tiles outward from the centre at fixed intervals. This tool writes the plain form, so make the change by hand.
Yes, with an explicit size or a sizing keyword such as closest-side, and then a final stop that is a solid colour to fill the remainder. Neither is exposed in the generator, so this is a hand edit.
Only whether the radii are forced to be equal. Use a circle when you want a visibly round light, and an ellipse when you want the gradient to conform to the container's proportions and reach all four corners.
The centre is probably close to an edge, so the visible area is dominated by stops near the end of the list. Move the centre toward the middle, or switch to the ellipse shape so the ending figure covers the container.
Yes. The unprefixed function, including the at position syntax and multiple stops, is supported across current Chrome, Firefox, Safari and Edge. Only newer interpolation features such as an in oklab colour space need a fallback.