Fading color outward from a center with radial-gradient

A CSS radial gradient spreads color outward from a center point, fading through a circle or ellipse to the edges of the box. You declare it in one property value, and the browser paints the whole fade at render time. The minimal form is short: background: radial-gradient(#fff, #000) fades white at the center to black at the rim. Per MDN's radial-gradient reference, the function generates a <gradient> image, so it ships no file and scales to any size.

That one idea, distance from the center drives the color, explains every option the function accepts. You set the shape, the size, where the center sits, and the color stops along the radius. This guide walks the radial-gradient syntax end to end: circle versus ellipse, the four size keywords, positioning the center, and where radial gradients earn their place.

Key Takeaways

• A radial gradient fades color outward from a center point through a circle or ellipse (MDN).
• Shape comes first: circle stays uniform in every direction, ellipse stretches to fit the box.
• Four size keywords, from closest-side to farthest-corner, set where the fade ends.
• Position the center with at, as in at 20% 30% or at top left.
• It ships zero image files and scales cleanly, like every CSS gradient (caniuse).

What Is a CSS Radial Gradient?

A CSS radial gradient is a color transition the browser computes from a center point outward, not a bitmap you supply. It belongs to the <image> category, so it works anywhere an image works: background-image, border-image, mask-image, and more. MDN's radial-gradient documentation defines the full syntax, and MDN's gradient overview lists every property where a gradient is valid.

The concept predates CSS. A color gradient is a progression that interpolates between defined colors across a range, and the radial version maps that range onto distance from a point. CSS standardized the behavior in the CSS Images Module Level 4, which specifies how the shape, size, and color stops resolve. Radial is one of three gradient types covered in the full CSS gradient guide.

The anatomy is compact. A radial gradient takes an optional shape and size, an optional center introduced by at, then a list of color stops. Leave out the shape and size, and the browser defaults to an ellipse reaching the farthest corner. Leave out the position, and the center sits at the middle of the box. So radial-gradient(#fff, #000) is really radial-gradient(ellipse farthest-corner at center, #fff, #000) with the defaults filled in.

Circle or Ellipse: Picking a Shape

The shape keyword decides how the gradient reaches its edges, and the two options behave differently. A circle keeps the same radius in every direction, so the fade stays perfectly round whatever the box. An ellipse stretches its horizontal and vertical radii independently to match the element, so a wide box gets a wide, oval fade. MDN's radial-gradient page documents both keywords and their default sizing.

A circle is not an ellipse squeezed into shape. That distinction trips people up. In a 400 by 100 box, radial-gradient(circle closest-side, #fff, #000) paints a tight round glow with flat black filling the sides. Swap in ellipse and the fade stretches to an oval sized to the farthest corner, filling the box. Same colors, completely different result.

Ellipse is the default, and it's usually right for a full-bleed background wash. Reach for circle when the effect has to stay round regardless of the container: a spotlight, a badge glow, a button highlight. The CSS Images specification defines the ellipse axis math if you need the exact ratios.

How Do You Size a Radial Gradient?

The size value sets where the gradient's outer edge lands, and there are four named keywords plus explicit lengths. Each keyword names the reference point the fade should reach: nearest side, nearest corner, farthest side, or farthest corner. farthest-corner is the default, which is why an unsized gradient fills the whole box.

Keyword	Ending edge reaches	Typical use
closest-side	Nearest side of the box	Tight, contained glow
closest-corner	Nearest corner	Small off-center highlight
farthest-side	Farthest side	Fade that clips the corners
farthest-corner	Farthest corner (default)	Full-box background wash

You can skip the keywords and give explicit sizes instead. A single length like radial-gradient(circle 80px, #fff, #000) sets a circle's radius directly, while two lengths set an ellipse's horizontal and vertical radii. MDN's radial-gradient reference lists which size forms are legal, since a circle takes one length and an ellipse takes two.

Size and shape read together. A closest-side circle sizes its radius to the nearest edge and stays round, while a closest-side ellipse sizes each axis to its own nearest edge. Reading the size keyword next to the shape keyword tells you exactly where the last color stop lands, per the CSS Images Module.

Positioning the Center

The center of a radial gradient defaults to the middle of the box, and the at keyword moves it anywhere. Write the position after the shape and size, introduced by at, using keywords, percentages, or lengths. radial-gradient(circle at top left, #fff, #000) anchors the bright center in the corner, so the fade sweeps across the element from there.

Percentages and lengths give precise control. at 20% 30% places the center a fifth of the way across and just under a third down, measured from the top-left origin. at 50px 80px uses fixed offsets instead. A single keyword like at top centers horizontally and pins the vertical, per MDN's radial-gradient documentation.

Moving the center is what sells the illusion of light. A glow that sits off-center reads as a real light source, while a dead-center glow reads as flat. Pair an off-center circle with closest-side for a compact spotlight; pair a centered ellipse with farthest-corner for an even background wash. The same off-center trick works for soft reflections and highlights, not just hard spotlights.

Color Stops Shape the Fade

Color stops are where a radial gradient stops being a two-color fade and becomes a design. A stop pairs a color with an optional position, measured as distance from the center outward. Omit the positions and the colors spread evenly from center to edge; add them and you place each ring exactly. radial-gradient(#fff 0%, #4f46e5 40%, #000 100%) holds white at the core, hits indigo at 40 percent of the radius, then lands on black at the rim.

Positions run from the center to the ending shape, so 50% sits halfway out, not halfway across the box. Two stops at the same position create a hard ring instead of a fade, which is how you draw concentric bands or a crisp target. A bare percentage between two colors, as in radial-gradient(#fff, 30%, #000), sets the fade's midpoint without adding a third color, shifting where the two meet. The CSS Images specification defines this interpolation, including how out-of-order stops get clamped to the previous value.

Color choice matters as much as position. Stops that jump between very different hues can show a muddy band where they meet, because the browser interpolates through the space between them. MDN's color value reference covers the formats you can use per stop, from hex to rgb() to hsl(). Keeping adjacent stops close in hue keeps the fade clean.

How Do You Write a CSS Radial Gradient?

The fastest route is a visual generator that writes the syntax for you. ToolSura's CSS gradient generator lets you pick colors, drag stops, and set the shape, then copies production-ready code. By hand, it takes five short steps.

1. Choose the shape: circle for a uniform round fade, ellipse for one that stretches to the box.
2. Set the size, either a keyword like closest-side or farthest-corner, or an explicit radius such as 80px.
3. Position the center with at, using a keyword like top left or coordinates like 20% 30%.
4. List two or more color stops, each a color with an optional position from the center outward.
5. Assign the function to background or another image property, then preview and adjust.

A full example ties it together: background: radial-gradient(circle closest-side at 30% 30%, #fbbf24, #b45309) paints a compact amber spotlight anchored toward the top left. Drop the shape and size, and the same stops become a full-box wash. Every radial gradient grows from that one pattern, no matter how many colors you stack on.

Where Radial Gradients Shine

Radial gradients handle the effects a linear fade can't fake: anything that reads as a point of light. Spotlights, glows, and vignettes all follow distance from a center, which is exactly what the function models. CSS-Tricks' gradient overview walks through several of these patterns with live code.

A spotlight is a bright circle on a dark base, sized small with closest-side and placed off-center. A glow is the same idea softened, often a semi-transparent white center fading to full transparency so it layers over other content. Layer a glow above a photo and it catches the eye without hiding what sits underneath. A vignette flips the colors: transparent in the middle, darkening toward the corners, which frames a photo or pulls the eye inward.

Depth effects lean on radial gradients too. A subtle light-to-dark ellipse behind a card suggests a curved surface, and a small bright stop near the top of a button mimics a glossy highlight. Because the gradient is an <image>, you can stack several with commas and let the transparent layers combine into a lit scene from pure CSS. In our testing, three stacked semi-transparent radial layers still rendered in a single paint on current Chrome and Firefox, so the effect stays cheap. For a straight-line fade, the linear gradient guide covers that side; for rotational sweeps, see the conic gradient guide.

Common Pitfalls to Avoid

Most radial gradient bugs trace back to three mistakes. When we built ToolSura's gradient generator, the single most common question was why a circle won't fill a wide banner, and the answer is always the shape default. The first is expecting a circle to fill a non-square box. It won't, because a circle holds one radius, so the sides of a wide box stay flat color. Use ellipse for full coverage, or keep the round shape and design around it.

The second is banding on large surfaces. A gradient stretched across a big background can show visible steps where the browser runs out of intermediate shades, especially between close dark tones. Adding a mid stop or spreading the colors apart usually smooths it. Support is not the issue: caniuse's gradient data shows radial gradients working unprefixed across every current browser.

The third is confusing position units with stop units. The at position measures from the box's top-left corner, while stop positions measure from the gradient's center outward. Mixing those two models puts colors where you don't expect them. When a gradient looks wrong, check the shape first, the size second, then the stops, the same order the radial-gradient syntax reads them.

Related Tools & Further Reading

Radial gradients are one piece of the CSS gradient toolkit, and the guides below cover the rest. Start with the complete CSS gradient guide for the overview, then branch into the specific type you need.

• CSS Gradients Explained: Linear, Radial, and How to Use Them
• CSS Linear Gradient: Syntax, Examples, and Best Practices
• CSS Conic Gradient: How to Create Pie Charts and Color Wheels
• Tools: CSS gradient generator to build, tweak, and copy any radial gradient visually.
• CSS Flexbox Generator