BACKGROUNDS

Radial Glow Background

A modern dark background with layered radial glows that add soft color, depth, and focus without using images or external libraries.

Radial Glow

Soft Light. Strong Visual Focus.

Layered radial gradients with pure CSS.

HTML
<div class="radial-glow-bg">

  <div class="radial-glow-content">
    <span>Radial Glow</span>
    <h2>Soft Light. Strong Visual Focus.</h2>
    <p>Layered radial gradients with pure CSS.</p>
  </div>

</div>
CSS
.radial-glow-bg{
  position:relative;
  min-height:320px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 20% 25%,
      rgba(34,211,238,.28),
      transparent 32%
    ),
    radial-gradient(
      circle at 80% 75%,
      rgba(139,92,246,.30),
      transparent 34%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(217,70,239,.12),
      transparent 45%
    ),
    #050914;
}

.radial-glow-bg::before{
  content:"";

  position:absolute;
  width:240px;
  height:240px;

  border-radius:50%;

  background:rgba(34,211,238,.10);
  filter:blur(60px);

  animation:glowPulse 4s ease-in-out infinite;
}

.radial-glow-content{
  position:relative;
  z-index:2;

  max-width:600px;
  padding:30px;

  text-align:center;
}

.radial-glow-content span{
  display:inline-block;
  margin-bottom:12px;

  color:#22d3ee;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.radial-glow-content h2{
  margin:0 0 12px;

  color:#ffffff;
  font-size:32px;
  line-height:1.2;
}

.radial-glow-content p{
  margin:0;

  color:#c7d2e5;
  font-size:15px;
}

@keyframes glowPulse{

  0%,
  100%{
    transform:scale(.85);
    opacity:.5;
  }

  50%{
    transform:scale(1.25);
    opacity:1;
  }

}

How This Radial Glow Background Works

The Radial Glow Background creates a dark section with multiple soft areas of cyan, purple, and magenta light. Its HTML is intentionally compact: the .radial-glow-bg wrapper contains a single .radial-glow-content block with a label, heading, and paragraph. The published component does not use JavaScript, so the complete visual effect is handled with CSS.

The main background is built by stacking three radial-gradient() layers over a solid #050914 base. The first gradient places cyan rgba(34,211,238,.28) near the upper-left at 20% 25%. It fades completely to transparent at 32%, keeping the cyan light concentrated around that area instead of covering the whole section.

The second radial gradient creates a purple glow toward the lower-right. It is positioned at 80% 75%, starts with rgba(139,92,246,.30), and becomes transparent at 34%. Placing the cyan and purple lights on opposite sides helps distribute color across the dark background.

A third gradient sits directly in the center at 50% 50%. It uses magenta rgba(217,70,239,.12) and fades to transparent at 45%. Its lower opacity and wider fade make it more subtle than the other two gradients. Together, these three layers create the component’s static radial lighting. For more information about this CSS technique, see the MDN radial-gradient documentation.

The component adds another light source with .radial-glow-bg::before. This pseudo-element measures 240px by 240px and becomes circular through border-radius: 50%. Its cyan rgba(34,211,238,.10) background is softened with filter: blur(60px), so the element appears as a diffused glow rather than a visible circle.

Because the parent uses flexbox with align-items: center and justify-content: center, the absolutely positioned pseudo-element sits around the center of the container when no explicit top, left, right, or bottom value is assigned. The glow then pulses behind the centered content.

The glowPulse keyframes control that motion. At the start and end of the four-second animation, the pseudo-element uses scale(.85) and .5 opacity. At the halfway point, it expands to scale(1.25) and reaches full opacity. The animation uses ease-in-out timing and repeats infinitely, producing a continuous expansion and contraction.

The .radial-glow-content block is kept above the decorative glow with position: relative and z-index: 2. It has a maximum width of 600px, 30px padding, and centered text. The small uppercase label uses cyan #22d3ee, the heading uses white 32px text, and the paragraph uses 15px text in #c7d2e5.

Customizing the Radial Glow Background

The existing CSS provides several useful values for adjusting the colors, placement, size, and animation of the glow effect.

  • Replace the #050914 base color to match a different dark page theme.
  • Change the cyan rgba(34,211,238,.28), purple rgba(139,92,246,.30), and magenta rgba(217,70,239,.12) values to create another color palette.
  • Adjust 20% 25%, 80% 75%, and 50% 50% to reposition the three radial gradients.
  • Modify the 32%, 34%, and 45% transparent stops to control how far each background glow spreads.
  • Change the pseudo-element’s 240px width and height to make the animated central glow larger or smaller.
  • Adjust blur(60px) or the .10 cyan background opacity to change the softness and strength of the animated glow.
  • Change the 4s glowPulse duration to make the pulse slower or faster.
  • Modify the .85 and 1.25 scale values or the .5 and 1 opacity values to control how strongly the central glow pulses.

Where to Use This Radial Glow Background

The distributed lighting and centered pulse work well for sections that need subtle movement while keeping their content easy to read.

  • SaaS and technology website hero sections.
  • Developer portfolio introductions.
  • Product or app feature headers.
  • Call-to-action sections with centered text and buttons.
  • Dark-theme landing-page banners.
  • Pricing or product announcement sections that need a visual focal point.
  • Software and digital-service pages using cyan, purple, or magenta accent colors.

For a version that uses multiple independently positioned color shapes, the Floating Blobs Background is a related CodeRipple component. The Radial Glow Background is more centralized, using three static radial gradients and one animated pseudo-element instead of several separate moving elements.

Frequently Asked Questions

Does the Radial Glow Background require JavaScript?

No. The published component contains no JavaScript. The gradients, blurred glow, pulse animation, positioning, and content styling are all implemented with CSS.

How are the different glow colors created?

Three radial-gradient() layers are stacked over the dark base. They use cyan, purple, and magenta with different positions, opacity levels, and transparent stops to distribute light across the section.

What part of the background is animated?

The three gradients in the main background property remain static. The animation is applied to the .radial-glow-bg::before pseudo-element, which changes its scale and opacity through the glowPulse keyframes.

How long does the glow animation take?

The glowPulse animation runs for four seconds with ease-in-out timing and repeats infinitely. The central glow expands from .85 scale to 1.25 while its opacity increases from .5 to 1, then returns to its starting state.

The Radial Glow Background combines layered radial gradients with one blurred, pulsing CSS element, providing a focused animated backdrop without images, external graphics, or JavaScript.

Scroll to Top