How to Create Radial Gradient in CSS: Syntax and Examples

Use the radial-gradient() CSS function to create a smooth circular or elliptical gradient. It starts from a center point and spreads outward with color stops you define inside the parentheses.

Syntax

The radial-gradient() function creates a gradient that radiates from an origin point outward in a circle or ellipse. It has this basic form:

• radial-gradient(shape size at position, start-color, ..., end-color)
• shape: circle or ellipse (default is ellipse)
• size: controls how far the gradient spreads (e.g., closest-side, farthest-corner)
• position: where the gradient starts (default is center)
• color stops: list of colors and optional stop points (percentages or lengths)

css

background: radial-gradient(circle at center, red, yellow, green);

Output

A smooth circular gradient from red in the center to yellow and then green at the edges.

Example

This example shows a radial gradient background that starts with blue in the center and fades to white at the edges in a circular shape.

css

body {
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle at center, blue 0%, white 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  color: #333;
}

h1 {
  background: rgba(255, 255, 255, 0.7);
  padding: 1rem 2rem;
  border-radius: 8px;
}

Output

The entire page background is a smooth blue circle in the center fading out to white edges, with a centered heading on top.

Common Pitfalls

Some common mistakes when using radial gradients include:

• Forgetting to specify the at position, which defaults to center but might not be what you want.
• Using incorrect color stop syntax, like missing commas or invalid percentages.
• Expecting a linear gradient effect instead of a circular or elliptical spread.
• Not setting a height or width on the element, so the gradient might not show as expected.

Here is an example of a wrong and right way:

css

/* Wrong: missing commas and no position */
background: radial-gradient(circle red, yellow, green);

/* Right: commas and position included */
background: radial-gradient(circle at center, red, yellow, green);

Quick Reference

Property	Description	Example
shape	Defines the shape of the gradient	circle, ellipse
size	Controls how far the gradient extends	closest-side, farthest-corner
position	Sets the gradient's center point	center, top left, 50% 50%
color stops	Colors and where they start/end	red 0%, yellow 50%, green 100%

Key Takeaways

Use radial-gradient() to create circular or elliptical color transitions.

Specify shape, size, and position for precise control over the gradient's look.

Always separate colors with commas and optionally add stop points for smooth blending.

Set element size to see the gradient clearly on your page.

Test gradients in different browsers to ensure consistent appearance.