12 CSS Ripple Effects04 / 12

Pure CSSMIT licensed

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. Orbitron + Rajdhani on a near-black #050008 background.

Published

Live Demo
Try it

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

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;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Ripple Effect from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Neon Glow Ripple Effect
Source: https://codefronts.com/motion/css-ripple-designs/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. Orbitron + Rajdhani on a near-black #050008 background.
## HTML
```html
<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>
```
## CSS
```css
@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;
  }
}
```

Techniques used in this demo

background-clip: textMDN ↗filterMDN ↗radial-gradient()MDN ↗grid-templateMDN ↗@keyframesMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →