Radial Gradients: Circles, Ellipses, and Glow Effects

Introduction

If you look at a solar eclipse, a glowing light bulb in a fog, or a circular spotlight cast on a stage, you are seeing colors that transition outward from a center point.

In CSS, this visual effect is generated using Radial Gradients. While linear gradients slide colors along a straight vector, radial gradients radiate colors outward in circular or elliptical patterns. They are the ideal tool for creating lighting effects, glowing spheres, simulated metallic surfaces, and subtle radial backdrops for card containers.

---

What You Will Learn

• The syntax of the CSS radial-gradient() function.
• The difference between circle and ellipse shapes.
• Positioning the center origin coordinates of the gradient.
• Sizing options: closest-side, farthest-side, closest-corner, farthest-corner.
• Creating a glowing sphere effect.

---

Prerequisites

• Linear Gradients: Vectors, Angles, and Striped Patterns

---

Detailed Explanation: Syntax & Shapes

A radial gradient is defined by its center position, shape, size, and color stops:

selector {
  background: radial-gradient(shape size at position, color1, color2, ...);
}

---

1. Shape

• ellipse: (Default) The gradient stretches to match the aspect ratio of the element.
• circle: The gradient remains a perfect circle regardless of the element's proportions.

---

2. Position

Defines where the center of the gradient starts (using the same keywords as background-position):

• at center (default)
• at top left
• at 30% 40%

---

3. Sizing Keywords

Defines where the gradient ends (its radius boundary):

• closest-side: The radius extends to meet the closest boundary side of the container.
• farthest-side: The radius extends to meet the furthest boundary side of the container.
• closest-corner: The radius extends to meet the closest corner coordinate.
• farthest-corner: (Default) The radius extends to meet the furthest corner coordinate.

---

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Radial Gradient Sizing
    CS[closest-side: Stops at nearest edge]
    FS[farthest-side: Stops at furthest edge]
    CC[closest-corner: Stops at nearest corner]
    FC[farthest-corner: Stops at furthest corner]
    end

---

Code Examples

Example 1: Spotlight Backdrop

Create a dark layout with a subtle blue spotlight radiating from the top-center:

.dashboard-hero {
  height: 500px;
  background-color: #0f172a;
  
  /* Elliptical glow starting from top-center, fading to dark slate */
  background-image: radial-gradient(ellipse at top, #1e3a8a 0%, #0f172a 70%);
}

Example 2: 3D Glowing Sphere

We can use a radial gradient to make a 2D circle look like a 3D sphere by offsetting the center coordinates to simulate a light source:

.sphere {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  
  /* Offset the spotlight top-left (30% 30%) to simulate light reflection */
  background: radial-gradient(circle at 30% 30%, #38bdf8 0%, #0369a1 50%, #0f172a 100%);
  
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

---

Summary

Radial gradients transition colors outward from a focal coordinate center in circular or elliptical patterns. By positioning the origin point using coordinates or keywords and sizing boundary parameters (such as farthest-corner), developers can generate 3D shadows and glowing backdrops.

---

Related Articles

• Gradients
• Linear Gradients

Next Tutorial

How do we combine colors, opacities, and blurs to build modern UI styles? Let's check: Glassmorphism Effects.