What this generates
This page generates a Material-style expanding ripple on click, plus the JS to position it. A CSS @keyframes animation scales a circular dot from 0 to 4x while fading out; the JS snippet creates that dot at the exact click coordinates and removes it after the animation.
Change the fields above and the output updates live -- copy it once you're happy with the result.
Related tools
See the CSS Cursor Trail Effect Generator for a related effect.
Frequently Asked Questions (FAQ)
What does this generator actually output?
It generates a Material-style expanding ripple on click, plus the JS to position it. A CSS @keyframes animation scales a circular dot from 0 to 4x while fading out; the JS snippet creates that dot at the exact click coordinates and removes it after the animation.
Does this send anything to a server?
No. The snippet is built in your browser from the fields you fill in. Nothing is uploaded, logged, or sent anywhere.
Can I use this output directly in production CSS?
Yes -- copy the output into your stylesheet or component. Adjust class names and selectors to match your project's naming, since the generated selectors are generic placeholders.
