12 CSS Ripple Effects 12 / 12

CSS Aurora Borealis Ripple Background

A night-sky hero with four drifting blur-filtered aurora blob layers (mix-blend-mode: screen), concentric ripple rings expanding from multiple anchor points in teal, indigo and cyan, 80 JS-seeded twinkling stars and floating editorial badges.

CSS + JS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="rpl-12">
  <!-- Aurora blobs -->
  <div class="rpl-12__aurora">
    <div class="rpl-12__blob rpl-12__blob--a"></div>
    <div class="rpl-12__blob rpl-12__blob--b"></div>
    <div class="rpl-12__blob rpl-12__blob--c"></div>
    <div class="rpl-12__blob rpl-12__blob--d"></div>
  </div>

  <!-- Ripple rings -->
  <div class="rpl-12__ripple-field">
    <div class="rpl-12__arc rpl-12__arc--t1"></div>
    <div class="rpl-12__arc rpl-12__arc--t2"></div>
    <div class="rpl-12__arc rpl-12__arc--t3"></div>
    <div class="rpl-12__arc rpl-12__arc--t4"></div>
    <div class="rpl-12__arc rpl-12__arc--i1"></div>
    <div class="rpl-12__arc rpl-12__arc--i2"></div>
    <div class="rpl-12__arc rpl-12__arc--i3"></div>
    <div class="rpl-12__arc rpl-12__arc--c1"></div>
    <div class="rpl-12__arc rpl-12__arc--c2"></div>
  </div>

  <!-- Stars -->
  <div class="rpl-12__stars" id="rpl-12-stars"></div>

  <!-- Floating labels -->
  <div class="rpl-12__badge rpl-12__badge--1">Pure CSS</div>
  <div class="rpl-12__badge rpl-12__badge--2">No Canvas</div>
  <div class="rpl-12__badge rpl-12__badge--3">CSS Ripple</div>
  <div class="rpl-12__badge rpl-12__badge--4">Keyframes</div>

  <!-- Main content -->
  <div class="rpl-12__content">
    <div class="eyebrow">Aurora Ripple Effect</div>
    <h1>Where<br>light <em>ripples</em><br>endlessly.</h1>
    <p>Aurora blobs drift across a starfield while concentric rings expand outward — layered CSS gradients, blur filters and keyframe animations. Zero JavaScript for the background.</p>
    <div class="rpl-12__ctas">
      <a href="#" class="rpl-12__cta rpl-12__cta--primary">Explore Effect →</a>
      <a href="#" class="rpl-12__cta rpl-12__cta--ghost">View Source</a>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300;1,600&family=Outfit:wght@300;400;500&display=swap');

.rpl-12, .rpl-12 *, .rpl-12 *::before, .rpl-12 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-12 ::selection { background: #a5f3fc; color: #020617; }

.rpl-12 {
  font-family: 'Outfit', sans-serif;
  background: #020617;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

/* ─── Aurora layers: radial blobs that drift and pulse ─── */
.rpl-12__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Blob A — teal/green */
.rpl-12__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: rpl-12-drift ease-in-out infinite alternate;
}
.rpl-12__blob--a {
  width: 70vw; height: 50vh;
  top: -10%;  left: -10%;
  background: radial-gradient(ellipse, rgba(52,211,153,0.4) 0%, rgba(16,185,129,0.2) 50%, transparent 100%);
  animation-duration: 12s;
}
.rpl-12__blob--b {
  width: 60vw; height: 60vh;
  top: 20%;  right: -15%;
  background: radial-gradient(ellipse, rgba(99,102,241,0.35) 0%, rgba(79,70,229,0.15) 50%, transparent 100%);
  animation-duration: 16s;
  animation-delay: -4s;
}
.rpl-12__blob--c {
  width: 55vw; height: 45vh;
  bottom: -10%; left: 20%;
  background: radial-gradient(ellipse, rgba(6,182,212,0.3) 0%, rgba(14,165,233,0.15) 50%, transparent 100%);
  animation-duration: 10s;
  animation-delay: -7s;
}
.rpl-12__blob--d {
  width: 40vw; height: 35vh;
  top: 30%; left: 30%;
  background: radial-gradient(ellipse, rgba(167,243,208,0.25) 0%, rgba(52,211,153,0.1) 50%, transparent 100%);
  animation-duration: 20s;
  animation-delay: -10s;
}
@keyframes rpl-12-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(4%, 6%) scale(1.08); }
  66%  { transform: translate(-3%, 4%) scale(0.95); }
  100% { transform: translate(6%, -4%) scale(1.05); }
}

/* ─── Ripple rings that expand from center ─── */
.rpl-12__ripple-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rpl-12__arc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: rpl-12-ring ease-out infinite;
}

/* Teal rings */
.rpl-12__arc--t1 { width: 100px; height: 100px; border-color: rgba(52,211,153,0.6); animation-duration: 6s; animation-delay: 0s; }
.rpl-12__arc--t2 { width: 100px; height: 100px; border-color: rgba(52,211,153,0.35); animation-duration: 6s; animation-delay: 1.5s; }
.rpl-12__arc--t3 { width: 100px; height: 100px; border-color: rgba(52,211,153,0.18); animation-duration: 6s; animation-delay: 3.0s; }
.rpl-12__arc--t4 { width: 100px; height: 100px; border-color: rgba(52,211,153,0.08); animation-duration: 6s; animation-delay: 4.5s; }

/* Indigo rings */
.rpl-12__arc--i1 { width: 100px; height: 100px; border-color: rgba(129,140,248,0.5); animation-duration: 8s; animation-delay: 2s; }
.rpl-12__arc--i2 { width: 100px; height: 100px; border-color: rgba(129,140,248,0.25); animation-duration: 8s; animation-delay: 4s; }
.rpl-12__arc--i3 { width: 100px; height: 100px; border-color: rgba(129,140,248,0.12); animation-duration: 8s; animation-delay: 6s; }

/* Cyan rings — slightly offset */
.rpl-12__arc--c1 { width: 100px; height: 100px; border-color: rgba(34,211,238,0.45); animation-duration: 9s; animation-delay: 1s; top: 40%; left: 55%; }
.rpl-12__arc--c2 { width: 100px; height: 100px; border-color: rgba(34,211,238,0.22); animation-duration: 9s; animation-delay: 3.5s; top: 40%; left: 55%; }

@keyframes rpl-12-ring {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(14); opacity: 0; }
}

/* Stars */
.rpl-12__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rpl-12__star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: rpl-12-twinkle ease-in-out infinite alternate;
}
@keyframes rpl-12-twinkle {
  to { opacity: 0.1; transform: scale(0.6); }
}

/* Content */
.rpl-12__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 600px;
}

.rpl-12__content .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(165,243,252,0.6);
  margin-bottom: 20px;
  border: 1px solid rgba(165,243,252,0.2);
  border-radius: 40px;
  padding: 6px 16px;
}

.rpl-12__content h1 {
  font-family: 'Cormorant Garamond';
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 300;
  line-height: 0.9;
  color: #f0fdff;
  letter-spacing: -0.01em;
}
.rpl-12__content h1 em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, #5eead4, #22d3ee, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rpl-12__content p {
  margin-top: 24px;
  font-size: 1rem;
  color: rgba(240,253,255,0.5);
  line-height: 1.7;
  font-weight: 300;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.rpl-12__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}

.rpl-12__cta {
  padding: 14px 30px;
  border-radius: 40px;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
}
.rpl-12__cta--primary {
  background: linear-gradient(135deg, #14b8a6, #6366f1);
  color: #fff;
  box-shadow: 0 8px 32px rgba(99,102,241,0.35), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.rpl-12__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(99,102,241,0.5);
}
.rpl-12__cta--ghost {
  border: 1px solid rgba(165,243,252,0.25);
  color: rgba(240,253,255,0.75);
  background: rgba(255,255,255,0.04);
}
.rpl-12__cta--ghost:hover {
  border-color: rgba(165,243,252,0.5);
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}

/* Floating badges */
.rpl-12__badge {
  position: absolute;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(165,243,252,0.15);
  border-radius: 40px;
  padding: 8px 16px;
  font-size: 0.72rem;
  color: rgba(165,243,252,0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 5;
  animation: rpl-12-float ease-in-out infinite alternate;
}
.rpl-12__badge--1 { top: 14%; left: 8%; animation-duration: 6s; }
.rpl-12__badge--2 { top: 20%; right: 6%; animation-duration: 8s; animation-delay: -2s; }
.rpl-12__badge--3 { bottom: 18%; left: 6%; animation-duration: 7s; animation-delay: -4s; }
.rpl-12__badge--4 { bottom: 14%; right: 8%; animation-duration: 5s; animation-delay: -1s; }
@keyframes rpl-12-float {
  to { transform: translateY(-10px); }
}

@media (max-width: 640px) {
  .rpl-12__badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rpl-12__blob, .rpl-12__arc, .rpl-12__star, .rpl-12__badge { animation: none !important; }
  .rpl-12__cta { transition: none; }
}
(function() {
  const stars = document.getElementById('rpl-12-stars');
  for (let i = 0; i < 80; i++) {
    const s = document.createElement('div');
    s.className = 'rpl-12__star';
    const size = Math.random() * 2.5 + 0.5;
    const delay = Math.random() * 4;
    const dur = Math.random() * 3 + 2;
    s.style.cssText = `
      width:${size}px;height:${size}px;
      left:${Math.random()*100}%;
      top:${Math.random()*100}%;
      opacity:${Math.random()*0.8+0.1};
      animation-duration:${dur}s;
      animation-delay:${delay}s;
    `;
    stars.appendChild(s);
  }
})();

More from 12 CSS Ripple Effects

CSS Water Ripple Click EffectCSS Ripple Button Click AnimationCSS Pond Ripple Background AnimationCSS Heartbeat Pulse Ripple EffectCSS Ripple Login Form UICSS Neon Glow Ripple EffectCSS Ripple Loading SpinnerCSS Sonar Ping Ripple AnimationCSS Ripple Card Hover EffectCSS Sound Wave Ripple VisualizerCSS Liquid Drop Ripple Animation
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →