12 CSS Ripple Effects 04 / 12

CSS Neon Glow Ripple Effect

Six neon-core ripple emitters on a dark grid: magenta, cyan, lime, orange, electric-blue and plasma-white — each a 24px glowing core with four rings that scale from 0 to 100% with staggered delays, box-shadow neon glow and color-matched hues.

Pure CSS 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-04">
  <div class="rpl-04__title">Neon Glow Ripple Effects</div>

  <div class="rpl-04__stage">
    <!-- MAGENTA -->
    <div class="rpl-04__node rpl-04__node--mag">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Magenta</div>
    </div>

    <!-- CYAN -->
    <div class="rpl-04__node rpl-04__node--cyn">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Cyan</div>
    </div>

    <!-- LIME -->
    <div class="rpl-04__node rpl-04__node--lim">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Lime</div>
    </div>

    <!-- ORANGE -->
    <div class="rpl-04__node rpl-04__node--org">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Orange</div>
    </div>

    <!-- BLUE -->
    <div class="rpl-04__node rpl-04__node--blu">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Electric</div>
    </div>

    <!-- WHITE -->
    <div class="rpl-04__node rpl-04__node--wht">
      <div class="rpl-04__ripple-wrap">
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__ring"></div>
        <div class="rpl-04__core"></div>
      </div>
      <div class="rpl-04__label">Plasma</div>
    </div>
  </div>

  <div class="rpl-04__hero">
    <h2>CSS box-shadow glow · keyframe scale</h2>
    <p>Every ring is a single div, scaled from 0 to 1 with a staggered delay. The neon glow comes from layered box-shadow — no SVG filters required.</p>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600&display=swap');

.rpl-04, .rpl-04 *, .rpl-04 *::before, .rpl-04 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-04 ::selection { background: #f0ff00; color: #0a0010; }

.rpl-04 {
  font-family: 'Rajdhani', sans-serif;
  background: #050008;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 60px 24px;
  color: #e8e0ff;
  overflow: hidden;
  position: relative;
}

/* Subtle grid */
.rpl-04::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(160,80,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,80,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.rpl-04__title {
  font-family: 'Orbitron';
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #ff00ff, #a000ff, #00ffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(160,0,255,0.5));
  z-index: 2;
}

/* ─── Main neon ripple display ─── */
.rpl-04__stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  z-index: 2;
  width: min(900px, 100%);
}
@media (max-width: 640px) { .rpl-04__stage { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 420px) { .rpl-04__stage { grid-template-columns: 1fr; } }

.rpl-04__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.rpl-04__ripple-wrap {
  position: relative;
  width: 120px; height: 120px;
  display: grid;
  place-items: center;
}

/* Center core */
.rpl-04__core {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
}

/* Neon rings — 4 per node */
.rpl-04__ring {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  inset: 0;
  animation: rpl-04-glow 3s ease-out infinite;
}

/* MAGENTA node */
.rpl-04__node--mag .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #ff80ff, #ff00cc);
  box-shadow: 0 0 20px #ff00cc, 0 0 40px rgba(255,0,204,0.5);
}
.rpl-04__node--mag .rpl-04__ring { border: 1.5px solid #ff00cc; box-shadow: 0 0 8px #ff00cc; }
.rpl-04__node--mag .rpl-04__ring:nth-child(2) { animation-delay: 0.6s; }
.rpl-04__node--mag .rpl-04__ring:nth-child(3) { animation-delay: 1.2s; }
.rpl-04__node--mag .rpl-04__ring:nth-child(4) { animation-delay: 1.8s; }

/* CYAN node */
.rpl-04__node--cyn .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #80ffff, #00ffee);
  box-shadow: 0 0 20px #00ffee, 0 0 40px rgba(0,255,238,0.5);
}
.rpl-04__node--cyn .rpl-04__ring { border: 1.5px solid #00ffee; box-shadow: 0 0 8px #00ffee; }
.rpl-04__node--cyn .rpl-04__ring:nth-child(2) { animation-delay: 0.5s; }
.rpl-04__node--cyn .rpl-04__ring:nth-child(3) { animation-delay: 1.0s; }
.rpl-04__node--cyn .rpl-04__ring:nth-child(4) { animation-delay: 1.5s; }

/* YELLOW-GREEN node */
.rpl-04__node--lim .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #eeff80, #aaff00);
  box-shadow: 0 0 20px #aaff00, 0 0 40px rgba(170,255,0,0.5);
}
.rpl-04__node--lim .rpl-04__ring { border: 1.5px solid #aaff00; box-shadow: 0 0 8px #aaff00; }
.rpl-04__node--lim .rpl-04__ring:nth-child(2) { animation-delay: 0.7s; }
.rpl-04__node--lim .rpl-04__ring:nth-child(3) { animation-delay: 1.4s; }
.rpl-04__node--lim .rpl-04__ring:nth-child(4) { animation-delay: 2.1s; }

/* ORANGE node */
.rpl-04__node--org .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #ffcc80, #ff6600);
  box-shadow: 0 0 20px #ff6600, 0 0 40px rgba(255,102,0,0.5);
}
.rpl-04__node--org .rpl-04__ring { border: 1.5px solid #ff6600; box-shadow: 0 0 8px #ff6600; }
.rpl-04__node--org .rpl-04__ring:nth-child(2) { animation-delay: 0.55s; }
.rpl-04__node--org .rpl-04__ring:nth-child(3) { animation-delay: 1.1s; }
.rpl-04__node--org .rpl-04__ring:nth-child(4) { animation-delay: 1.65s; }

/* BLUE node */
.rpl-04__node--blu .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #80b0ff, #0055ff);
  box-shadow: 0 0 20px #0055ff, 0 0 40px rgba(0,85,255,0.5);
}
.rpl-04__node--blu .rpl-04__ring { border: 1.5px solid #4488ff; box-shadow: 0 0 8px #4488ff; }
.rpl-04__node--blu .rpl-04__ring:nth-child(2) { animation-delay: 0.65s; }
.rpl-04__node--blu .rpl-04__ring:nth-child(3) { animation-delay: 1.3s; }
.rpl-04__node--blu .rpl-04__ring:nth-child(4) { animation-delay: 1.95s; }

/* WHITE/PURPLE node */
.rpl-04__node--wht .rpl-04__core {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 35% 30%, #fff, #cc88ff);
  box-shadow: 0 0 20px #fff, 0 0 40px rgba(200,136,255,0.6);
}
.rpl-04__node--wht .rpl-04__ring { border: 1.5px solid rgba(220,180,255,0.9); box-shadow: 0 0 8px rgba(220,180,255,0.7); }
.rpl-04__node--wht .rpl-04__ring:nth-child(2) { animation-delay: 0.4s; }
.rpl-04__node--wht .rpl-04__ring:nth-child(3) { animation-delay: 0.8s; }
.rpl-04__node--wht .rpl-04__ring:nth-child(4) { animation-delay: 1.2s; }

@keyframes rpl-04-glow {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.rpl-04__label {
  font-family: 'Orbitron';
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Bottom hero text */
.rpl-04__hero {
  text-align: center;
  z-index: 2;
  max-width: 560px;
}
.rpl-04__hero h2 {
  font-family: 'Orbitron';
  font-size: clamp(0.8rem, 2vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(232,224,255,0.5);
  margin-bottom: 10px;
}
.rpl-04__hero p {
  font-size: 1rem;
  color: rgba(232,224,255,0.4);
  line-height: 1.6;
  font-weight: 300;
}

@media (prefers-reduced-motion: reduce) {
  .rpl-04__ring { animation: none !important; opacity: 0.15; }
}

More from 12 CSS Ripple Effects

CSS Aurora Borealis Ripple BackgroundCSS Ripple Loading SpinnerCSS Sonar Ping Ripple AnimationCSS Ripple Card Hover EffectCSS Sound Wave Ripple VisualizerCSS Liquid Drop Ripple AnimationCSS Water Ripple Click EffectCSS Ripple Button Click AnimationCSS Pond Ripple Background AnimationCSS Heartbeat Pulse Ripple EffectCSS Ripple Login Form UI
View the full collection →

Search CodeFronts

Loading…

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