Ripple Background — Free HTML CSS JS Radar Pulse Snippet
Ripple Background · Animations · Plain HTML, CSS & JS · Live preview
Copy & paste
Source Code
<section class="rp-hero">
<div class="rp-ripple" id="rpRipple" aria-hidden="true"></div>
<div class="rp-content">
<div class="rp-core">📡</div>
<h1>Always broadcasting</h1>
<p>Concentric rings pulse outward from the center — and from wherever you click.</p>
</div>
</section>*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#06060f;color:#fff}
.rp-hero{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at center,#11112a,#06060f 70%)}
.rp-ripple{position:absolute;inset:0;display:grid;place-items:center}
.rp-circle{position:absolute;border-radius:50%;border:1px solid rgba(129,140,248,.4);animation:rpPulse 4s ease-out infinite}
@keyframes rpPulse{0%{transform:scale(0);opacity:.7}100%{transform:scale(1);opacity:0}}
.rp-burst{position:absolute;border-radius:50%;border:1.5px solid rgba(34,211,238,.7);pointer-events:none;animation:rpBurst .9s ease-out forwards}
@keyframes rpBurst{from{width:0;height:0;opacity:.8}to{width:340px;height:340px;opacity:0}}
.rp-content{position:relative;z-index:1;padding:0 20px;max-width:560px;pointer-events:none}
.rp-core{width:84px;height:84px;margin:0 auto 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:38px;background:linear-gradient(160deg,#312e81,#6366f1);box-shadow:0 0 60px -8px rgba(99,102,241,.8)}
.rp-content h1{font-size:clamp(32px,7vw,60px);font-weight:900;letter-spacing:-.03em}
.rp-content p{margin-top:14px;font-size:16px;color:#9a9ac0;line-height:1.55}var host = document.getElementById('rpRipple');
var RINGS = 6, MAX = 680, GAP = 4 / 6; // 6 rings over the 4s loop
// Build evenly-staggered concentric rings so a new one always emerges as the
// outermost fades — a continuous radar pulse from the center.
for (var i = 0; i < RINGS; i++) {
var c = document.createElement('span');
c.className = 'rp-circle';
c.style.width = MAX + 'px';
c.style.height = MAX + 'px';
c.style.animationDelay = (-i * GAP).toFixed(2) + 's';
host.appendChild(c);
}
// Click anywhere to fire a one-shot ripple from that point.
var hero = document.querySelector('.rp-hero');
hero.addEventListener('pointerdown', function (e) {
var r = hero.getBoundingClientRect();
var b = document.createElement('span');
b.className = 'rp-burst';
b.style.left = (e.clientX - r.left) + 'px';
b.style.top = (e.clientY - r.top) + 'px';
b.style.transform = 'translate(-50%,-50%)';
hero.appendChild(b);
b.addEventListener('animationend', function () { b.remove(); });
});Extend with AI
Take This Snippet Further With AI
The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.
What's included
Features
About this UI Snippet
Ripple Background — Concentric Radar Rings That Pulse Outward
The ripple background is the radar-like hero where concentric rings continuously expand from a central point and fade as they grow — evoking a signal broadcasting outward. This snippet builds it with plain HTML, CSS, and a little vanilla JavaScript, and adds a satisfying click-to-ripple burst from wherever you tap.
The continuous center pulse
The steady radar effect comes from several rings sharing one expand-and-fade animation but starting at different times. JavaScript creates six .rp-circle rings, all the same maximum size, and gives each a negative animation-delay spaced evenly across the loop (-i * (loop / count)). The negative delay means each ring starts already partway through its animation, so at any moment the rings are at six different sizes — one just emerging at the center while another fades at the edge. The result is a smooth, never-gapping pulse rather than all rings firing together. The rpPulse keyframe scales each ring from 0 to 1 while fading opacity from .7 to 0.
Why negative delays instead of positive
Using negative animation-delay is the trick that makes the loop look established from the very first frame. A positive delay would mean the rings stagger in over the first few seconds, leaving the hero empty at load; a negative delay starts each ring as if the animation had been running forever, so the full radar is present immediately. This is the standard technique for seamless, pre-warmed looping emitters.
Click-to-ripple bursts
Beyond the ambient pulse, a pointerdown anywhere on the hero spawns a one-shot .rp-burst ring at the exact click point. It grows from zero to 340px and fades over 0.9s, then removes itself on animationend so bursts never accumulate. Centering it with translate(-50%, -50%) at the click coordinates makes the ripple emanate from your finger, like dropping a stone in water. This interactive layer makes the otherwise passive backdrop respond to the user.
A glowing core
At the center sits a glowing emblem (here a broadcast icon) with a soft box-shadow, anchoring the rings as the source of the signal. The content sits above the ripple layer with pointer-events: none (so clicks still reach the hero to spawn bursts), and a radial background gradient darkens toward the edges to frame the pulse.
All CSS animation
Both the ambient rings and the click bursts are pure CSS keyframes; JavaScript only creates elements and wires the click. So the per-frame work is on the compositor, and the effect stays smooth even with several rings animating at once.
Customizing it
Change RINGS and MAX for more or larger rings, retime the loop, recolor the ring borders, or adjust the burst size and speed. Make the rings filled instead of outlined, or anchor the source off-center. Pair it with a pulse button call to action or an aurora text headline for a signal-themed hero.
Step by step
How to Use
- 1Paste HTML, CSS, and JSConcentric rings pulse outward from a glowing core.
- 2Watch the radarNew rings emerge at the center as outer ones fade.
- 3Click anywhereA ripple burst expands from the click point.
- 4Click repeatedlyEach burst cleans itself up after fading.
- 5Adjust the ringsChange RINGS and MAX for count and size.
- 6Recolor the pulseEdit the ring border colors.
Real-world uses
Common Use Cases
animationend so the DOM stays clean.Got questions?
Frequently Asked Questions
Six rings share one expand-and-fade keyframe but each gets a negative animation-delay spaced evenly across the loop. That offsets them so at any moment they sit at six different sizes — one emerging at the center while another fades at the edge — producing a smooth, never-gapping radar pulse instead of all rings firing together.
A negative delay starts each ring as if the animation had already been running, so the full radar is present from the very first frame at load. A positive delay would stagger the rings in over the first seconds, leaving the hero empty initially. Negative delays are the standard way to pre-warm a seamless looping emitter.
A pointerdown anywhere on the hero creates a burst element at the click coordinates, centered with translate(-50%,-50%). It grows from zero to 340px and fades over 0.9 seconds via a CSS keyframe, then removes itself on animationend so bursts never accumulate. The ripple emanates from exactly where you tapped.
Yes. The content layer is set to pointer-events: none, so taps on the headline pass through to the hero and still spawn a ripple burst. The ambient rings layer is also non-interactive, so only the hero receives the pointerdown that creates bursts.
Render the ambient rings from an array with their negative delays, and handle pointerdown to append a burst element via a ref (or render a managed list and prune on animationend). Keep cleanup in mind so bursts are removed. The keyframes are pure CSS. In Tailwind, define the pulse and burst animations in the config and apply staggered delays with arbitrary values.