Radial Gradients for Circular Effects

If you’ve ever seen a glowing button, a soft spotlight, or a circular highlight on a website, there’s a good chance it was made with a radial gradient.

In this article, you’ll learn what radial gradients are and how to use them to create simple but impressive circular effects using only HTML and CSS. No design tools, no fancy frameworks—just a basic text editor and a browser.

You don’t need any coding experience. We’ll take it step by step, explain every line, and help you build confidence as you go.

What is a radial gradient?

A gradient is a smooth blend between two or more colors.

A radial gradient is a gradient that starts from a center point and moves outward in a circle (or ellipse). Think of it like a soft glow or a spotlight: bright in the center, fading out toward the edges.

In CSS, we create a radial gradient with:

background: radial-gradient(shape size at position, color-stops...);

That might look scary, but don’t worry. We’ll build it up slowly and visually.

Getting set up (no special tools needed)

To follow along, you only need:

A text editor (Notepad, VS Code, or any basic editor)
A web browser (Chrome, Firefox, Edge, Safari, etc.)

Create a file called gradient-demo.html and open it in your browser after each change.

Here’s a simple starting template you can paste into that file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Radial Gradient Demo</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #222; /* dark background to show gradients nicely */
      font-family: Arial, sans-serif;
      color: #fff;
    }
  </style>
</head>
<body>
  <!-- We’ll add examples here -->
</body>
</html>

Save the file and open it in your browser. You should see a plain dark page.

Example 1: A basic circular glow

First, let’s create the simplest radial gradient: a soft white glow.

Add this HTML inside the <body> tag:

<div class="circle-basic">Basic Glow</div>

Now add this CSS inside the <style> tag in the <head> section:

.circle-basic {
  width: 200px;              /* circle width */
  height: 200px;             /* circle height */
  border-radius: 50%;        /* makes the box a circle */
  display: flex;             /* center the text */
  justify-content: center;
  align-items: center;
  font-size: 16px;

  /* The radial gradient background */
  background: radial-gradient(
    circle,                   /* shape: circle */
    rgba(255, 255, 255, 0.9), /* bright center color (almost white) */
    rgba(255, 255, 255, 0)    /* fully transparent at the edges */
  );
}

What this does

border-radius: 50% turns the square into a circle.
background: radial-gradient(circle, color1, color2) creates a gradient that starts with color1 at the center and fades to color2 at the edge.
Here, the center is almost white and the edge is transparent, making it look like a glowing circle.

Expected result: You should see a white glow in the shape of a circle on the dark background, with the text "Basic Glow" in the middle.

Try it yourself: Change the first color to a different one, for example:

rgba(0, 255, 0, 0.9)  /* bright green */

and see how the glow changes.

Example 2: A colored circular button

Now let’s turn that glow into a more realistic button with depth.

Update your HTML to add another element:

<div class="circle-basic">Basic Glow</div>
<div class="circle-button">Click Me</div>

Add this CSS for .circle-button:

.circle-button {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-left: 20px;        /* space from the first circle */

  /* Dark outer color, lighter center for a "raised" look */
  background: radial-gradient(
    circle at 30% 30%,       /* move the light slightly up-left */
    #ffecb3,                 /* light center (soft yellow) */
    #ff9800                  /* darker edge (orange) */
  );

  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4); /* shadow for depth */
  cursor: pointer;          /* mouse cursor looks clickable */
}

.circle-button:hover {
  /* on hover, make the center a bit brighter */
  background: radial-gradient(circle at 30% 30%, #ffffff, #ff9800);
}

What’s new here

circle at 30% 30% moves the center of the gradient toward the top-left, making it look like light is shining from that direction.
The center color is light, and the outer color is darker, giving a 3D, raised effect.
box-shadow adds depth, making the button pop out.
The :hover rule changes the gradient when the mouse is over the button, making it feel interactive.

Expected result: You’ll see a circular glow and, next to it, a circular button that looks raised and responds when you hover.

Try it yourself: Play with the circle at 30% 30% part. Try circle at 70% 70% or circle at center and see how the "light direction" moves.

Example 3: A soft spotlight background

Radial gradients aren’t just for small circles. You can also use them to create a spotlight effect on a larger area.

Let’s add a full-width section with a soft center glow.

Add this HTML below your circles:

<section class="spotlight">
  <h1>Spotlight Title</h1>
  <p>Text in the middle of a soft radial gradient.</p>
</section>

Now add this CSS:

.spotlight {
  width: 100%;
  height: 250px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Big, soft spotlight in the center */
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.15),  /* soft light center */
    rgba(0, 0, 0, 0.8)          /* dark outer area */
  );
}

.spotlight h1 {
  margin: 0;
}

.spotlight p {
  margin-top: 8px;
}

What this does

The section stretches across the page width and is 250px tall.
The gradient starts with a very light color in the center and fades to dark, creating a spotlight on the text.
This is a great way to draw attention to a title or important message.

Try it yourself: Change the center color to something like rgba(0, 150, 255, 0.25) for a blue spotlight, or adjust the height to see how the effect scales.

Example 4: Layered circular glow (multiple gradients)

You can even stack multiple radial gradients to create more complex circular effects, like a glowing ring.

Add this HTML:

<div class="glow-ring">Glow Ring</div>

Add this CSS:

.glow-ring {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  margin-top: 40px;

  /* Two radial gradients stacked with a comma */
  background:
    radial-gradient(
      circle,                      /* inner glow */
      rgba(0, 255, 255, 0.9) 0%,   /* bright cyan center */
      rgba(0, 255, 255, 0) 60%     /* fade out */
    ),
    radial-gradient(
      circle,                      /* outer ring */
      rgba(0, 255, 255, 0) 65%,    /* transparent inner part */
      rgba(0, 255, 255, 0.7) 80%,  /* bright ring */
      rgba(0, 255, 255, 0) 100%    /* fade again */
    );
}

How this works

The background property has two radial-gradient(...) values separated by a comma.
The first gradient makes a soft inner glow.
The second gradient creates a ring by being transparent in the center, then bright, then transparent again.

Expected result: You’ll see a glowing circle with a bright ring around it—perfect for sci-fi UI elements, status indicators, or icons.

Try it yourself: Change the color rgba(0, 255, 255, ...) to another color (like purple or red), or tweak the percentage values (60%, 65%, 80%) to change the thickness and position of the ring.

Quick recap: key ideas to remember

A radial gradient creates color that radiates from a center point outward.
Use radial-gradient(circle, color1, color2) for simple circular glows.
Add at x% y% (like circle at 30% 30%) to move the light source and change where the brightest area appears.
You can stack multiple radial gradients by separating them with commas to create more complex circular effects like rings or layered glows.
Small changes in color and position can dramatically change the mood and style of your UI.

What’s next?

If you’ve followed along to this point, you’ve already:

Created a basic circular glow -Designed a circular button with depth
Built a spotlight background section
Experimented with layered glow rings

That’s a big step—radial gradients are a powerful visual tool, and you’re now comfortable using them.

From here, you can:

Use radial gradients to highlight logos or profile pictures
Combine them with animations (like transition or @keyframes) for pulsing glows
Mix radial and linear gradients for even richer designs

Most importantly, keep experimenting. Tweak the colors, positions, and sizes, refresh the browser, and see what happens. Every tiny change teaches you something new—and that’s how real learning happens.

Mudzinga