CSS RIPPLE EFFECT GENERATOR

Example output (default settings)

<button class="ripple-btn" type="button">Click me</button>

<script>
  document.querySelectorAll('.ripple-btn').forEach((btn) => {
    btn.addEventListener('click', (e) => {
      const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    // Radius that reaches the farthest corner
    const radius = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));
      const ripple = document.createElement('span');
      ripple.className = 'ripple';
      ripple.style.width = ripple.style.height = `${radius * 2}px`;
      ripple.style.left = `${x - radius}px`;
      ripple.style.top = `${y - radius}px`;
      btn.appendChild(ripple);
      ripple.addEventListener('animationend', () => ripple.remove());
    });
  });
</script>

.ripple-btn {
  position: relative;
  overflow: hidden;
  padding: 14px 28px;
  border: 0;
  border-radius: 8px;
  background: #ff6a35;
  color: #201d19;
  font: inherit;
  cursor: pointer;
}

.ripple-btn .ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.45);
  animation: ripple 600ms ease-out forwards;
}

@keyframes ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ripple-btn .ripple { animation-duration: 1ms; }
}

How to build a CSS button ripple effect

1. 1

   Choose whether the ripple spreads from the click point or from the center of the button.

2. 2

   Set the ripple color, opacity, duration, and easing, and style the button itself.

3. 3

   Click the preview button to see the ripple and adjust until it feels right.

4. 4

   Copy the CSS and the HTML with its script snippet into your page.

Questions

Can a ripple effect be done in pure CSS?

Only partly. CSS alone can't know where the pointer clicked, so a pure-CSS version can only grow from a fixed point such as the center. The tool's click-point mode adds a few lines of JavaScript that create a span at the click position, which then animates with a CSS keyframe and removes itself when finished.

How is the ripple size calculated?

The circle's radius is the distance from the click point to the farthest corner of the button, so it always covers the whole surface by the end of the animation. In center mode the radius is half the button's diagonal.

Why does the button need overflow: hidden and position: relative?

The ripple is absolutely positioned inside the button, so the button must be its positioning context (position: relative). overflow: hidden clips the growing circle to the button's rounded shape instead of letting it spill outside.

Does it respect reduced-motion preferences?

Yes. The generated CSS includes a prefers-reduced-motion: reduce block that shrinks the animation to 1ms, so users who ask for less motion see no visible spreading circle.

Does this tool store or upload anything?

No. The preview and the generated code are produced locally in your browser; none of your settings are sent to a server.

Related tools

• CSS Starfield / Dots GeneratorScatter hundreds of points from a single box-shadow into a drifting, parallax starfield background and copy the CSS.
• CSS Skeleton Loader GeneratorDesign a skeleton loading placeholder with a shimmer or pulse animation, custom colors, speed, and radius, then copy the HTML and CSS.
• Aurora Background GeneratorCreate a drifting northern-lights background from blurred, animated color blobs blended with mix-blend-mode.
• Animated Gradient Background GeneratorBuild a slow-moving, multi-color gradient background for hero sections and banners.
• Shimmer / Metallic Text GeneratorSweep a bright highlight band across text for a metallic or shimmer effect, built with an animated gradient.
• CSS Marquee GeneratorBuild a seamless, looping scrolling-text ticker in pure CSS with direction, speed, gap, pause-on-hover, and faded edges.
• CSS Animated Glowing Border GeneratorBuild a rotating conic-gradient border that chases around a card, with adjustable speed, thickness, and glow blur.
• Typewriter Effect GeneratorAnimate text typing itself out with a pure-CSS steps() animation and a blinking caret — no JavaScript needed.