CSS Radial Gradients Tutorial: From Basic to Advanced

What Are Radial Gradients?

Radial gradients transition colors outward from a central point, creating circular or elliptical color blends. Unlike linear gradients that move along a straight axis, radial gradients radiate in all directions — perfect for spotlights, vignettes, and focal-point effects.

The browser draws a radial gradient by defining a center point, a shape, and a size, then distributing color stops from the center outward.

Basic Syntax

/* Simplest form — two colors, centered, ellipse */
background: radial-gradient(#3B82F6, #1E3A5F);

/* Explicit circle */
background: radial-gradient(circle, #3B82F6, #1E3A5F);

/* Circle with custom center */
background: radial-gradient(circle at 75% 25%, #3B82F6, #1E3A5F);

If you omit the shape, the gradient defaults to ellipse, which stretches to fill the container. Use circle when you want uniform radius regardless of container proportions.

Shape: Circle vs. Ellipse

/* Circle — stays round even in wide containers */
.card-icon {
  background: radial-gradient(circle, #8B5CF6, #4C1D95);
}

/* Ellipse — fills the full container naturally */
.hero {
  background: radial-gradient(ellipse at center, #1E293B, #0F172A);
}

Positioning the Center

Control where the gradient originates using the at keyword followed by coordinates:

/* Keyword positions */
background: radial-gradient(circle at top left, #3B82F6, #1E3A5F);
background: radial-gradient(circle at center, #3B82F6, #1E3A5F);
background: radial-gradient(circle at bottom right, #3B82F6, #1E3A5F);

/* Percentage positions */
background: radial-gradient(circle at 20% 80%, #3B82F6, #1E3A5F);

/* Pixel positions */
background: radial-gradient(circle at 100px 200px, #3B82F6, #1E3A5F);

For hero sections, positioning the gradient off-center creates dynamic, asymmetric light effects that feel more natural than a dead-center glow.

Sizing the Gradient

Size keywords control how far the gradient extends:

/* Compact glow — stops at nearest edge */
background: radial-gradient(circle closest-side at 30% 50%, #3B82F6, transparent);

/* Wide spread — reaches farthest corner */
background: radial-gradient(circle farthest-corner at 30% 50%, #3B82F6, transparent);

For explicit sizes:

/* Pixel-based sizing (circle) */
background: radial-gradient(circle 150px at 50% 50%, #3B82F6, #1E3A5F);

/* Percentage-based sizing (ellipse) */
background: radial-gradient(ellipse 80% 50% at 50% 50%, #3B82F6, #1E3A5F);

Color Stops

Color stops work the same way as in linear gradients:

/* Multi-stop radial */
background: radial-gradient(
  circle,
  #FBBF24 0%,
  #F59E0B 30%,
  #D97706 60%,
  #92400E 100%
);

/* Hard-edge stop for ring effects */
background: radial-gradient(
  circle,
  #3B82F6 0% 40%,
  #1E3A5F 40% 100%
);

When two stops share the same position, the transition becomes a hard edge — useful for creating rings, targets, and bullseye patterns.

Practical Design Patterns

Spotlight Effect

.spotlight {
  background: radial-gradient(
    circle 300px at 70% 30%,
    rgba(59, 130, 246, 0.15),
    transparent
  );
}

Vignette Overlay

.vignette {
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

Glowing Button

.glow-btn {
  background: radial-gradient(circle, #8B5CF6, #6D28D9);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
}

Radial Progress Ring (with conic gradient)

Combine with conic-gradient for a progress indicator — the radial gradient handles the background while the conic handles the arc.

Common Mistakes

• Using circle on wide containers without sizing — the gradient stretches unpredictably. Always set an explicit size or use closest-side.
• Forgetting transparent at the edge — without it, the outermost color fills the remaining space as a solid block.
• Overlapping too many radial gradients — stacking three or more can hurt readability and GPU performance on mobile.

Key Takeaways

• Radial gradients radiate from a center point, creating circles or ellipses
• Use circle for uniform radius, ellipse (default) for container-filling shapes
• Position the center with at for off-center light effects
• Size keywords like closest-side and farthest-corner control the gradient spread
• Hard-edge stops create ring and target patterns
• Combine radial gradients with shadows and transparency for polished UI effects

Related Guides

• CSS Gradient Guide
• CSS Linear Gradient Tutorial
• CSS Design Tips

Try It Yourself

Build and preview radial gradients interactively with our CSS Gradient Generator. Adjust shape, position, and color stops, then copy the generated code into your project.