Aurora Background

<div class="aurora-bg">

  <div class="aurora-glow aurora-one"></div>
  <div class="aurora-glow aurora-two"></div>
  <div class="aurora-glow aurora-three"></div>

  <div class="aurora-content">
    <span>Aurora Background</span>
    <h2>Soft Motion. Modern Depth.</h2>
    <p>Animated layered glow with pure CSS.</p>
  </div>

</div>

.aurora-bg{
  position:relative;
  min-height:320px;
  overflow:hidden;

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

  background:#050914;
}

.aurora-glow{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;

  filter:blur(70px);
  opacity:.55;

  animation:auroraFloat 8s ease-in-out infinite alternate;
}

.aurora-one{
  top:-170px;
  left:-90px;
  background:#22d3ee;
}

.aurora-two{
  top:-100px;
  right:-120px;
  background:#8b5cf6;
  animation-delay:-3s;
}

.aurora-three{
  bottom:-220px;
  left:30%;
  background:#d946ef;
  animation-delay:-5s;
}

.aurora-content{
  position:relative;
  z-index:2;
  max-width:600px;
  padding:30px;
  text-align:center;
}

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

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

.aurora-content h2{
  margin:0 0 12px;

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

.aurora-content p{
  margin:0;

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

@keyframes auroraFloat{

  0%{
    transform:translate3d(-20px,-10px,0) scale(1);
  }

  50%{
    transform:translate3d(30px,20px,0) scale(1.08);
  }

  100%{
    transform:translate3d(-10px,35px,0) scale(.96);
  }

}

How This Aurora Background Works

The Aurora Background creates a dark section with three large, blurred color layers that move slowly behind centered content. The component uses cyan, purple, and magenta glows to produce the layered effect. Everything is implemented with HTML and CSS, and the published component contains no JavaScript.

The HTML starts with an .aurora-bg wrapper. Inside it are three decorative elements: .aurora-one, .aurora-two, and .aurora-three. Each also shares the .aurora-glow class, which provides the common size, blur, opacity, and animation settings. A separate .aurora-content element contains the visible label, heading, and paragraph.

The main .aurora-bg container has a minimum height of 320px and uses the dark #050914 background. position: relative provides the positioning context for the three absolutely positioned glows, while overflow: hidden clips the large blurred elements wherever they extend beyond the section.

Each .aurora-glow measures 420px by 420px. border-radius: 50% makes these elements circular, but their actual boundaries are softened with filter: blur(70px). Combined with .55 opacity, the heavy blur turns the solid circles into broad areas of diffused color rather than clearly visible shapes. For more information about this technique, see the MDN CSS blur documentation.

The first glow is cyan #22d3ee and begins partly outside the upper-left corner using top: -170px and left: -90px. The second uses purple #8b5cf6 and sits toward the upper-right at top: -100px and right: -120px. The third is magenta #d946ef, positioned lower with bottom: -220px and left: 30%.

All three glows run the same auroraFloat animation. It lasts eight seconds, uses ease-in-out timing, repeats infinitely, and runs in the alternate direction. At the beginning, each element uses translate3d(-20px,-10px,0) scale(1). Halfway through, it moves to 30px,20px and scales to 1.08. At the final keyframe, it moves to -10px,35px and scales down to .96.

The layers do not appear synchronized because the second glow has an animation-delay of -3s, while the third uses -5s. These negative delays place them at different points in the shared animation cycle, creating overlapping movement from a single set of keyframes.

The .aurora-content block remains above these decorative layers through position: relative and z-index: 2. It has a maximum width of 600px, 30px padding, and centered text. Flexbox on the parent centers this content horizontally and vertically within the section.

Customizing the Aurora Background

The effect can be adapted by changing the existing colors, dimensions, positioning, blur, and animation values.

• Replace the #050914 base color to match another dark page theme.
• Change #22d3ee, #8b5cf6, and #d946ef to create a different three-color aurora palette.
• Adjust the shared 420px width and height to make the glow areas larger or smaller.
• Modify the top, left, right, and bottom values on the three glow classes to redistribute the colors.
• Change filter: blur(70px) to make the colored layers softer or more defined.
• Adjust the shared .55 opacity to increase or reduce the strength of the glow.
• Change the 8s animation duration or the -3s and -5s delays to alter the timing between the layers.
• Edit the translate3d() and scale() values inside auroraFloat to control the distance and amount of movement.

Where to Use This Aurora Background

The large diffused color areas and slow CSS motion make this component suitable for sections where the background should provide movement without distracting from foreground content.

• SaaS and software landing-page hero sections.
• Developer and designer portfolio introductions.
• Product or app announcement banners.
• Technology-focused call-to-action sections.
• Dark-theme signup or newsletter areas.
• Feature introductions with centered headings and supporting text.
• Creative landing pages that need animated color behind otherwise static content.

For another approach using several moving, blurred color shapes, the Floating Blobs Background is a related CodeRipple component. Aurora Background uses larger 420px glow elements and positions much of each shape outside the section, creating broad areas of color rather than smaller visible blobs.

Frequently Asked Questions

Does the Aurora Background require JavaScript?

No. The published component contains no JavaScript. Its movement, blur, positioning, colors, and content layout are all implemented with CSS.

How is the soft aurora effect created?

Three circular elements use solid cyan, purple, and magenta backgrounds. A 70px CSS blur and .55 opacity diffuse those circles into large areas of soft color.

Why do the three aurora glows move differently?

They use the same auroraFloat keyframes, but the purple layer has a -3s animation delay and the magenta layer has a -5s delay. This places the layers at different stages of the animation.

How long does the aurora animation take?

The animation has an eight-second duration with ease-in-out timing, infinite repetition, and alternate direction. It changes both the translate3d() position and scale of each glow.

The Aurora Background combines three oversized blurred color layers with offset CSS animation timing, producing a continuously shifting backdrop without JavaScript, external images, or SVG graphics.