Click the preview button
A ripple expands outward from wherever you click, then fades away.
CSS Ripple Effect Generator
Build a material-style ripple that expands from the exact click point. Tune color, opacity and duration, then copy the code.
Ready-to-use CSS + JS
How it works
Tune the ripple
Adjust color, opacity and how fast it grows and fades.
Copy the code
Get a small CSS and JavaScript snippet for any button in your project.
FAQ
How does the ripple track the click position?
A script reads the click event's coordinates relative to the button, positions a circular element there, then animates it scaling up and fading out with CSS.
Can I use this on non-button elements?
Yes. Add the same class and click listener to any element with position: relative and overflow: hidden.
Does the ripple work with keyboard activation?
The snippet listens for click events, which fire for both mouse clicks and Enter/Space key activation on a focused button, so it works for keyboard users too.