🌈 What Is radial-gradient()?

The radial-gradient() function creates a gradient that radiates outward from a center point, forming circles or ellipses. It is perfect for spotlight effects, soft backgrounds, UI highlights, 3D illusions, and decorative patterns.

📦 Syntax

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

Parts of the syntax (all optional except colors):

📌 1. Basic Circle Gradient

background: radial-gradient(circle, red, blue);

A smooth transition from red at the center → blue at the edges.

📌 2. Basic Ellipse Gradient (Default)

background: radial-gradient(ellipse, orange, purple);

Ellipses are the default shape; the gradient scales to fit the element.

📌 3. Positioning the Gradient Center

background: radial-gradient(circle at top left, red, blue);

You can place the gradient center anywhere:

📌 4. Controlling the Gradient Size

background: radial-gradient(circle closest-side, red, blue);

📌 5. Multiple Color Stops

background: radial-gradient(circle, red 0%, yellow 40%, green 80%, blue 100%);

Each stop defines a color and where it appears.

📌 6. Hard Stops (Sharp Transition)

background: radial-gradient(circle, red 0 40%, blue 40% 100%);

Creates instant transitions — useful for simple rings or spotlight edges.

📌 7. Transparent Radial Gradients

background: radial-gradient(
  circle,
  rgba(255,255,255,0.8),
  rgba(255,255,255,0)
);

Great for glow effects and overlays.

📌 8. Using Radial Gradient for Shadows

box-shadow: 0 0 40px 20px radial-gradient(circle, rgba(0,0,0,0.3), transparent);

Creates soft, realistic shadows and glows.

📌 9. Repeating Radial Gradients

background: repeating-radial-gradient(
  circle,
  black 0,
  black 5px,
  white 5px,
  white 20px
);

Creates patterns like polka dots or ripples.

📌 10. Combining Radial Gradients With Images

background:
  radial-gradient(circle at center, rgba(0,0,0,0.5), transparent),
  url('photo.jpg');

Common for vignette or spotlight effects.

📌 11. Creating a Vignette Effect

background: radial-gradient(
  circle farthest-corner,
  transparent 60%,
  rgba(0,0,0,0.7)
);

Dramatic image framing for UI banners.

🧪 Real-World Examples

1️⃣ Soft Background for Cards

.card {
  background: radial-gradient(circle at top, #ffe0e0, #ff8a8a);
}

2️⃣ Spotlight Effect

.spotlight {
  background: radial-gradient(circle at 50% 30%, white, rgba(0,0,0,0.8));
}

3️⃣ Button Glow

.btn {
  background: radial-gradient(circle at center, #ffffffaa, #00000000),
              linear-gradient(to right, #4facfe, #00f2fe);
}

⚠️ Common Mistakes

🔥 Summary

radial-gradient() is a powerful tool for creating circular or elliptical gradients with smooth or sharp transitions. It's ideal for glowing effects, backgrounds, overlays, shadows, highlights, and decorative UI visuals.

Learn more →MDN Docs 📘