What radial-gradient() takes
background: radial-gradient(circle at center, #F5A63D 0%, #A8340F 100%);
A shape, a position after at, then the colour stops. Stops are measured
from the centre outwards: 0% is the middle, 100% the edge.
| Part | Options |
| --- | --- |
| Shape | circle, ellipse |
| Position | center, top, bottom left, 30% 70%, … |
| Size (optional) | closest-side, farthest-corner, a length |
What radial gradients are for
Spotlights and soft glows behind a heading, vignettes that darken the edges
of a photo, the highlight on a button that should look slightly lit, and
pie-like fills when combined with hard stops. Straight-line fades belong to the
linear generator; a sweep around a point is
conic-gradient, in the full gradient generator.
Hard edges make circles
Two stops at the same position — #A8340F 40%, transparent 40% — draw a
crisp disc. Layer several with different positions and you have dots, rings
and status badges with no image at all.
Computed on your device
The preview is CSS in your browser. Nothing is uploaded; the link in the address bar carries every setting.
Questions
Circle or ellipse — what is the difference?+
A circle spreads evenly in every direction and keeps its shape whatever the box is; an ellipse stretches to fit the box, so on a wide element the rings become wide. Ellipse is the CSS default; this tool defaults to circle because spotlights and vignettes are what radial gradients are mostly used for.
What does `at` do?+
It moves the centre. `at top left` starts the gradient in the corner, `at center` in the middle. Any length or percentage works too — `at 30% 70%` — which is how you put a light source exactly where a photo needs it.
How do I make a soft spotlight over a section?+
A radial from a light colour or transparent white to transparent, positioned near the top: `radial-gradient(circle at 50% 0%, rgb(255 255 255 / .18), transparent 60%)`. The second stop's position controls how far the glow reaches.
Why is the outer edge of my gradient not reaching the corners?+
Because the default size is `farthest-corner` only for an ellipse; a circle's radius is the distance to the farthest corner as well, but the ring is round so the corners of a wide box fall outside it. Add a size — `circle closest-side` or an explicit `circle 60%` — or accept the ellipse.
Can I use it for text?+
Yes — the gradient text generator on this site accepts radial too. It is background-clip that does the work, not the gradient kind.