Radial Gradient
Generate a radial gradient that spreads out from a center point.
Steps to make a radial gradient
- Drag the center handle to set where the gradient starts; by default it sits at 50% 50%.
- Choose circle or ellipse as the ending shape, then a size keyword for how far it reaches.
- Add color stops, with the first at the center, and drag their positions to control the spread.
- Copy the CSS, or open the color in the Color Picker to fine-tune a stop.
What is a radial gradient?
A radial gradient spreads color outward from a center point in concentric circles or ellipses, instead of along a straight line like a linear one. By default the shape is an ellipse, the size is farthest-corner and the center sits at 50% 50%, so the first color sits dead center and the last reaches the box corners. It is the effect to reach for when you want a glow, a spotlight, a vignette or a rounded backdrop.
Radial gradient shape and size keywords
Two parts decide how the shape grows: circle or ellipse for the form, and a size keyword for where it stops. The size keyword is the setting most people miss, and it changes the look completely:
How to position the center of a radial gradient
The single most searched radial-gradient problem is moving the center, because many generators only let you change colors. The center is whatever comes after the at keyword, read just like background-position, so horizontal comes first. Drag the handle in the tool and it writes this for you:
Why a radial gradient looks like a hard circle
A common surprise is a crisp ring instead of a soft blend. That happens when two color stops sit at the same or very close positions, so the color has no room to fade. Spread the stops apart for a smooth glow, or place them together on purpose when you want a solid disc or a pie-style edge. Holding one color from 0% to a set point, then switching, gives you a clean dot with a defined rim.
Where radial gradients get used
- Soft glows and spotlights behind a logo, hero or button.
- Vignettes that darken the edges of a photo or card.
- Round button highlights and faux-3D bubble effects.
- Spinner and loader masks, paired with a conic gradient.
- Layered mesh backgrounds, stacking several with the Gradient Background tool.
Radial vs linear and conic gradients
For a straight blend use the CSS Gradient builder; to sweep colors around a point, the Conic Gradient tool fits better.
Radial gradient browser support
radial-gradient() is supported in every current browser and has been unprefixed for years, so no -webkit- or -moz- prefix is needed. The newer interpolation hints, like blending in oklch, are well supported too; for very old browsers, set a plain background-color first as a fallback and let the gradient override it.
Add at and a position as the first argument, like radial-gradient(circle at 20% 80%, ...). Horizontal comes first, then vertical, the same as background-position. Dragging the handle here does it for you.
Ellipse is the default. Add the circle keyword to force a round shape that keeps equal radii regardless of the box proportions.
Put two color stops at the same position, for example #fff 40%, #000 40%, so the color switches with no blend between them.
It is the default size: the ending shape grows until it reaches the box corner furthest from the center, so the gradient always covers the whole element.
No. Every current browser supports the unprefixed radial-gradient(), so a plain background-color fallback is all you need for old ones.