How to Build a Radial Gradient in CSS Without Guessing Positions

A radial gradient spreads color outward from a point instead of across a straight line - useful for a soft spotlight behind a hero heading, a glow behind a button, a vignette that darkens toward the edges of a card. The hard part isn't the syntax itself, it's controlling exactly where the gradient centers and how it blends outward, which is much easier to do by looking at a live result than by typing coordinates.

Switch to radial

On the CSS gradient generator, the Type control at the top switches between Linear, Radial, and Conic (Conic only appears if your browser supports it - it's feature-detected, not always shown). Choosing Radial swaps the angle control for a position picker.

Set where it centers

The position control offers nine named positions: center, and each of the four edges and four corners (top, bottom, left, right, top left, top right, bottom left, bottom right). This maps directly to where the CSS radial-gradient() function's at keyword points - center puts the origin in the middle of whatever element the gradient fills, top left pulls it into the corner, and so on. There's no free-form coordinate input; the nine positions cover the realistic cases (a spotlight in the center, a glow pulling toward one corner) without needing pixel-level precision that would be fragile once the gradient is applied to an element of a different size than what you're previewing.

Add and adjust color stops

Add up to 8 color stops with the "Add color stop" button, and remove any down to a minimum of 2. Each stop has its own color picker, an opacity slider, and a position slider (0 to 100%, where the stop actually sits along the gradient's spread from center outward). Move a stop's position closer to 0 and its color dominates near the center; move it toward 100 and the color only shows up near the outer edge. This is where a radial gradient's character actually gets decided - two stops close together near the center produce a tight, bright core with a long fade outward; stops spread evenly produce a smoother, more gradual blend.

Position, then stops - in that order

Choose a color format for the copied CSS

Before copying, pick a color format: HEX, RGB, HSL, or OKLCH (OKLCH only appears when your browser supports the CSS oklch() function - it's feature-detected the same way conic gradients are). This only changes how the copied CSS text expresses each color, not how the live preview renders - the preview always shows the actual result regardless of which format you'll copy.

Copy the result

The output block shows the finished CSS as two lines - a solid background fallback (the first stop's color) and the full background-image: radial-gradient(...) declaration - and the Copy CSS button puts both on your clipboard. Paste them into your stylesheet as-is; the fallback line matters for the rare case a browser can't render the gradient at all, so don't drop it even though the gradient itself is what you were really after.

A quick shortcut: start from a preset

If you don't need a specific center position and just want something that already looks good, the preset gallery below the controls includes a ready-made radial gradient among its options - clicking it loads that gradient's full configuration (type, position, stops, colors) into the editor, which you can then adjust from there instead of building one from a blank state.

Common radial gradient uses, and how the settings map to each

A few real patterns come up often enough to name directly. A soft spotlight behind a heading or hero image: center position, a bright stop at 0% fading to fully transparent (opacity slider down to 0) by 60-80%, so the effect fades out before it reaches the edges of its container. A vignette that darkens toward the corners of a card or photo overlay: a dark, low-opacity color as the outer stop with position near 100%, and a fully transparent stop near the center, which is effectively the spotlight pattern inverted. A glow behind a button or icon: a small, bright core (an early stop position, like 10-20%) fading to transparent well before 100%, so the glow stays tight rather than washing across the whole element. In each case, the position slider on your stops is doing more work than the color itself - the same two colors produce a tight glow or a slow vignette purely by moving where the stops sit.

When the result doesn't look like what you expected

If the gradient looks like a hard-edged circle instead of a smooth blend, the two stops are probably too close together in position - spread them further apart and the transition softens. If it looks washed out or barely visible, check the opacity sliders on each stop rather than just the colors; a stop at 20% opacity blends heavily with whatever's behind the element even if its hex code looks solid in the color picker. And if the gradient seems to be centered somewhere unexpected, double check the position control rather than assuming the element itself is misaligned - "center" means the center of the element the gradient is applied to, which may not visually line up with the center of the page if that element isn't full-width.

Everything you build here is shareable too - the page's URL updates as you work, so you can send a link to the exact gradient rather than describing the settings. For the syntax reasoning behind why this beats hand-typing angle and position values, see the first guide in this series. And once you've got a gradient you like, it's worth understanding what that fallback line in the output actually does before you ship it.